模板驱动验证

<input id="name" name="name" class="form-control" 
      required minlength="4" appForbiddenName="bob" <-- 自定义验证
      [(ngModel)]="hero.name" #name="ngModel" > <-- NgModel 把自己控制的 FormControl 实例的属性映射出去，让你能在模板中检查控件的状态

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

响应式表单验证

【验证器函数】

• 同步验证器函数接收一个控件实例，然后返回一组验证错误或null。你可以在实例化一个 FormControl时把它作为构造函数的第二个参数传进去

• 异步验证器函数接收一个控件实例，并返回一个承诺promise 或可观察对象Observable , 它们稍后会发出一组验证错误或null。你可以在实例化一个FormControl时把它作为构造函数的第三个参数传进去

【内置验证器】

this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

自定义验证器

由于内置验证器无法适用于所有应用场景，有时候需要建立自定义验证器

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

【添加响应式表单】

this.heroForm = new FormGroup({
  'name': new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  'alterEgo': new FormControl(this.hero.alterEgo),
  'power': new FormControl(this.hero.power, Validators.required)
});

【添加到模板驱动表单】
建立一个指令来包装这个自定义验证器

@Directive({
  selector: '[appForbiddenName]',
  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input('appForbiddenName') forbiddenName: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) : null;
  }
}

表示控件状态的css类

通过以下类空值表单的css样式

• ng-valid 验证通过
• ng-invalid 验证不通过
• ng-pending 在等待...期间
• ng-pristine 原始状态
• ng-dirty 被动过的
• ng-untouched 没有被触碰的
• ng-touched 被触碰之后的