模板驱动验证

模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。
每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着 INVALID 状态）或者 null（对应着 VALID 状态）。

  1. <input id="name" name="name" class="form-control"
  2.       required minlength="4" appForbiddenName="bob"
  3.       [(ngModel)]="hero.name" #name="ngModel" >
  4. <div *ngIf="name.invalid && (name.dirty || name.touched)"
  5.     class="alert alert-danger">
  6.   <div *ngIf="name.errors.required">
  7.     Name is required.
  8.   </div>
  9.   <div *ngIf="name.errors.minlength">
  10.     Name must be at least 4 characters long.
  11.   </div>
  12.   <div *ngIf="name.errors.forbiddenName">
  13.     Name cannot be Bob.
  14.   </div>
  15. </div>

注意以下几点：

  • <input> 元素带有一些 HTML 验证属性：required 和 [minlength](https://angular.cn/api/forms/MinLengthValidator)。它还带有一个自定义的验证器指令 forbiddenName。要了解更多信息，参见自定义验证器一节。
  • #name="[ngModel](https://angular.cn/api/forms/NgModel)" 把 [NgModel](https://angular.cn/api/forms/NgModel) 导出成了一个名叫 name 的局部变量。[NgModel](https://angular.cn/api/forms/NgModel) 把自己控制的 [FormControl](https://angular.cn/api/forms/FormControl) 实例的属性映射出去，让你能在模板中检查控件的状态，比如 valid 和 dirty。要了解完整的控件属性，参见 API 参考手册中的AbstractControl。
  • <div> 元素的 *[ngIf](https://angular.cn/api/common/NgIf) 展示了一组嵌套的消息 div，但是只在有“name”错误和控制器为 dirty 或者 touched 时才出现。
  • 每个嵌套的 <div> 为其中一个可能出现的验证错误显示一条自定义消息。比如 required、[minlength](https://angular.cn/api/forms/MinLengthValidator) 和 forbiddenName。

    以上及一下大多都是官方文档上Copy的，ε=ε=ε=┏(゜ロ゜;)┛

响应式表单的验证

在响应式表单中，权威数据源是其组件类。不应该通过模板上的属性来添加验证器，而应该在组件类中直接把验证器函数添加到表单控件模型上（[FormControl](https://angular.cn/api/forms/FormControl)）。然后，一旦控件发生了变化，Angular 就会调用这些函数。

验证器函数

有两种验证器函数：同步验证器和异步验证器。

  • 同步验证器函数接受一个控件实例，然后返回一组验证错误或 null。你可以在实例化一个 [FormControl](https://angular.cn/api/forms/FormControl) 时把它作为构造函数的第二个参数传进去。
  • 异步验证器函数接受一个控件实例，并返回一个承诺（Promise）或可观察对象（Observable），它们稍后会发出一组验证错误或者 null。你可以在实例化一个 [FormControl](https://angular.cn/api/forms/FormControl) 时把它作为构造函数的第三个参数传进去。

注意：出于性能方面的考虑，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器。当每一个异步验证器都执行完之后，才会设置这些验证错误。

内置验证器

模板驱动表单中可用的那些属性型验证器

  1. class Validators {
  2.   static min(min: number): ValidatorFn
  3.   static max(max: number): ValidatorFn
  4.   static required(control: AbstractControl): ValidationErrors | null
  5.   static requiredTrue(control: AbstractControl): ValidationErrors | null
  6.   static email(control: AbstractControl): ValidationErrors | null
  7.   static minLength(minLength: number): ValidatorFn
  8.   static maxLength(maxLength: number): ValidatorFn
  9.   static pattern(pattern: string | RegExp): ValidatorFn
  10.   static nullValidator(control: AbstractControl): ValidationErrors | null
  11.   static compose(validators: ValidatorFn[]): ValidatorFn | null
  12.   static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
  13. }

用法如下：

  1. this.validateForm = this.fb.group({
  2.   userName: new FormControl(null, {
  3.     validators: [Validators.required, Validators.pattern(/^[^\s]|[^\s]$/g)],
  4.     updateOn: 'change'
  5.   }),
  6.   password: [null, [Validators.required, Validators.pattern(/^\S+$/)]],
  7.   verifCode: [null, Validators.required]
  8. });

自定义验证器

由于内置验证器无法适用于所有应用场景，有时候还是得创建自定义验证器。

  1. export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  2.   return (control: AbstractControl): {[key: string]: any} | null => {
  3.     const forbidden = nameRe.test(control.value);
  4.     return forbidden ? {'forbiddenName': {value: control.value}} : null;
  5.   };
  6. }

forbiddenNameValidator 工厂函数返回配置好的验证器函数。 该函数接受一个 Angular 控制器对象，并在控制器值有效时返回 null，或无效时返回验证错误对象。

添加响应式表单

在响应式表单组件中，添加自定义验证器相当简单。你所要做的一切就是直接把这个函数传给 [FormControl](https://angular.cn/api/forms/FormControl) 。

  1. this.heroForm = new FormGroup({
  2.   'name': new FormControl('', [
  3.     Validators.required,
  4.     Validators.minLength(4),
  5.     forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  6.   ]),
  7.   'alterEgo': [null],
  8.   'power': [null],
  9. });

添加到模板驱动表单

在模板驱动表单中，你不用直接访问 [FormControl](https://angular.cn/api/forms/FormControl) 实例。所以不能像响应式表单中那样把验证器传进去，而应该在模板中添加一个指令。
ForbiddenValidatorDirective 指令相当于 forbiddenNameValidator 的包装器。
Angular 在验证过程中能识别出指令的作用，是因为指令把自己注册成了 [NG_VALIDATORS](https://angular.cn/api/forms/NG_VALIDATORS) 提供商，该提供商拥有一组可扩展的验证器。

  1. @Directive({
  2.   selector: '[appForbiddenName]',
  3.   providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  4. })
  5. export class ForbiddenValidatorDirective implements Validator {
  6.   @Input('appForbiddenName') forbiddenName: string;
  8.   validate(control: AbstractControl): {[key: string]: any} | null {
  9.     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
  10.                               : null;
  11.   }
  12. }
  13. // use
  14. providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]

使用

  1. <input id="name" name="name" class="form-control"
  2.       required minlength="4" appForbiddenName="bob"
  3.       [(ngModel)]="hero.name" #name="ngModel" >

跨字段交叉验证

添加到响应式表单

实现要点AbstractControlOptions 接口类型：

  1. export declare interface AbstractControlOptions {
  2.   /**
  3.      * @description
  4.      * The list of validators applied to a control.
  5.      */
  6.   validators?: ValidatorFn | ValidatorFn[] | null;
  7.   /**
  8.      * @description
  9.      * The list of async validators applied to control.
  10.      */
  11.   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
  12.   /**
  13.      * @description
  14.      * The event name for control to update upon.
  15.      */
  16.   updateOn?: 'change' | 'blur' | 'submit';
  17. }
  1. this.heroForm = new FormGroup({
  2.   'name': new FormControl(null, [
  3.     Validators.required,
  4.     Validators.minLength(4),
  5.     forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  6.   ]),
  7.   'alterEgo': [null]
  8.   'power': [null, Validators.required]
  9. }, {
  10.     updateOn: 'change',
  11.     validators: (form: FormGroup) => {
  12.       const { controls: { name, alterEgo }, dirty } = form;
  13.       if (dirty) {
  14.        return alterEgo.value ? { 'identityRevealed': true } : null;
  15.       }
  16.       return null;
  17.     }
  18. });

添加到模板驱动表单中

创建一个指令，它会包装这个验证器函数。我们使用 [NG_VALIDATORS](https://angular.cn/api/forms/NG_VALIDATORS) 令牌来把它作为验证器提供出来。

  1. @Directive({
  2.   selector: '[appIdentityRevealed]',
  3.   providers: [{ provide: NG_VALIDATORS, useExisting: IdentityRevealedValidatorDirective, multi: true }]
  4. })
  5. export class IdentityRevealedValidatorDirective implements Validator {
  6.   validate(control: AbstractControl): ValidationErrors {
  7.     return identityRevealedValidator(control)
  8.   }
  9. }

将指令添加到 HTML 模板中。由于验证器必须注册在表单的最高层，所以我们要把该指令放在 form 标签上。

  1. <form #heroForm="ngForm" appIdentityRevealed>

显示校验信息

  1. <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
  2.     Name cannot match alter ego.
  3. </div>

异步验证

响应式表单实现异步验证器

还是依靠 AbstractControlOptions 接口类型实现

  1. this.heroForm = new FormGroup({
  2.   'name': new FormControl(null, [
  3.     Validators.required,
  4.     Validators.minLength(4),
  5.     forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  6.   ]),
  7.   'alterEgo': [null]
  8.   'power': [null, {
  9.         updateOn: 'bulr',
  10.       validators: Validators.required,
  11.     asyncValidators: (form: FormGroup) => {
  12.       const { controls: { name, alterEgo }, dirty } = form;
  13.       return new Promise(resolve =>{
  14.         if (dirty) {
  15.          resolve(alterEgo.value ? { 'identityRevealed': true } : null);
  16.         }
  17.         resolve(null);
  18.       });
  19.     }
  20.     }]
  21. });

模板驱动表单实现自定义异步验证器

基础概念

就像同步验证器有 [ValidatorFn](https://angular.cn/api/forms/ValidatorFn) 和 [Validator](https://angular.cn/api/forms/Validator) 接口一样，异步验证器也有自己的对应物：[AsyncValidatorFn](https://angular.cn/api/forms/AsyncValidatorFn) 和 [AsyncValidator](https://angular.cn/api/forms/AsyncValidator)。
它们非常像，但是有下列不同：

  • 它们必须返回承诺（Promise）或可观察对象（Observable），
  • 返回的可观察对象必须是有限的，也就是说，它必须在某个时间点结束（complete）。要把无尽的可观察对象转换成有限的，可以使用 first、last、take 或 takeUntil 等过滤型管道对其进行处理。

注意！异步验证总是会在同步验证之后执行，并且只有当同步验证成功了之后才会执行。如果更基本的验证方法已经失败了，那么这能让表单避免进行可能会很昂贵的异步验证过程，比如 HTTP 请求。
在异步验证器开始之后，表单控件会进入 pending 状态。你可以监视该控件的 pending 属性，利用它来给用户一些视觉反馈，表明正在进行验证。

创建验证器类

  1. @Injectable({ providedIn: 'root' })
  2. export class UniqueAlterEgoValidator implements AsyncValidator {
  3.   constructor(private heroesService: HeroesService) {}
  5.   validate(
  6.     ctrl: AbstractControl
  7.   ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
  8.     return this.heroesService.isAlterEgoTaken(ctrl.value).pipe(
  9.       map(isTaken => (isTaken ? { uniqueAlterEgo: true } : null)),
  10.       catchError(() => null)
  11.     );
  12.   }
  13. }

在template中使用：

  1. <input [(ngModel)]="name" #model="ngModel" UniqueAlterEgoValidator>
  2. <app-spinner *ngIf="model.pending"></app-spinner>

异步验证性能上的注意事项

默认情况下，每当表单值变化之后，都会执行所有验证器。对于同步验证器，没有什么会显著影响应用性能的地方。不过，异步验证器通常会执行某种 HTTP 请求来对控件进行验证。如果在每次按键之后都发出 HTTP 请求会给后端 API 带来沉重的负担，应该尽量避免。
我们可以把 updateOn 属性从 change（默认值）改成 submit 或 blur 来推迟表单验证的更新时机。

对于模板驱动表单：

  1. <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">

对于响应式表单：

  1. new FormControl('', {updateOn: 'blur'});