angular【响应式表单】和【模板式表单】校验器对比分析---angular总结

最新推荐文章于 2025-05-12 09:34:16 发布

原创

最新推荐文章于 2025-05-12 09:34:16 发布 · 866 阅读

1 ·

CC 4.0 BY-SA版权

本文对比分析了Angular中的响应式表单和模板式表单的校验器，探讨了它们在用户注册场景下的应用。通过实例展示了如何使用自定义同步和异步验证器，以及如何利用状态字段控制错误信息显示。总结指出，响应式表单因灵活性和代码复用性在复杂表单场景中更为适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：angular为我们提供了两种表单形式，一种是响应式表单，另一种是模板式表单。那么这两种表单有什么区别呢？它们各自的应用场景又是什么样的呢？什么是angular的校验器？校验器能够帮助我们实现什么功能？它又是怎样在响应式表单和模板式表单中应用的呢？下面的文章中，将会和大家分享一下关于angular响应式表单校验器和模板式表单校验器的内容。

（一）是什么

1.校验器

在我们注册一个邮箱的时候，我们需要输入用户名、密码、手机号、邮箱等内容。此时会出现，用户名没有输入，或者手机号位数不正确等内容。那么如何判这些内容呢，这时候就用到了校验器。通过校验器，可以帮助用户在登录的时候完成判断。
在Angular中为我们提供了几个内置 validators (校验器)，但在实际工作中为了满足项目需求，我们经常需要为应用添加一些自定义验证功能。同时校验器也有同步和异步的区别。

2.【响应式表单】和【模板式表单】校验器应用场景分析

响应式表单	模板式表单
复杂场景（需求多、需要处理内容细	简单场景（需求少、处理内容简单）

（二）应用

下面以用户注册页面为例，要完成如下的内容：

用户名：必填，为六位需要向服务端发出请求，判断是否已存在，需要自定义异步验证
电话号码：必须以13-、15-、18-开头，长度为11位
密码：必填使用angular内置验证器
确认密码：必填，必须和密码相同使用自定义同步验证器。

输入内容之前，校验器会提示：
在这里插入图片描述
按要求输入之后：

在这里插入图片描述
结果如下：

因为是异步操作，并且设置时间为5秒，所以在输入正确手机号之后，INVALID会变成 VALID。

【状态字段】
刚打开页面的时候，用户还没有进行任何操作，此时提示“用户名是必填项”，显然是不合理的，这时候就用到了，状态字段。通过状态字段可以设置，用户刚进入界面，没有任何操作时，隐藏提示“用户名是必填项”。

（1） touched untouched:控制错误信息是否现实；字段是否获取过焦点，如果任一个字段是touched,所有的都是toched,只有所有是untouched，才是untouched.
（2） pristine dirty：字段的值是否变过任意一个字段是Dirty,所有字段都是Dirty,pristine反之
（3）pending：为true时，正在校验

（三）代码

以用户注册为例：

因为功能相同，所以此处先写公共的表单校验器代码：

import {
   
    FormControl, FormGroup } from '@angular/forms';
import {
   
    Observable } from 'rxjs';
export function mobileValidator(control: FormControl): any {
   
   
    const myreg = /^(((13[0-9]{1}) | (15[0-9]{1}) | (18[0-9]{1})) +\d{8})$/;
    const valid = myreg.test(control.value);
    console.log('mobile的校验结果是:' + valid);
    return valid ? null : {
   
   mobile : true};
   }

export function mobileAsyncValidator(control: FormControl): any {
   
   
     const myreg = /^(((13[0-9]{1}) | (15[0-9]{1}) | (18[0-9]{1})) +\d{8})$/;
     const valid = myreg.test(control.value);
     console.log('mobile的校验结果是:' + valid);
     return Observable.of(valid ? null : {
   
    mobile : true}).delay(5000);
   }
export function equalValidator(group: FormGroup): any {
   
   
     const password: FormControl = group.get('password') as FormControl;
     const pconfirm: FormControl = group.get('pconfirm') as FormControl;
     const valid: boolean = (password.value === pconfirm.value);
     console.log('密码校验结果：' + valid);
     return valid ? null : {
   
    equal : {
   
   descxxx: '密码和确认密码不匹配'