模板驱动验证

模板驱动表单中添加验证机制,你要添加一些验证属性,就像原生的 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) 实例的属性映射出去,让你能在模板中检查控件的状态,比如 validdirty。要了解完整的控件属性,参见 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;
  7. validate(control: AbstractControl): {[key: string]: any} | null {
  8. return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
  9. : null;
  10. }
  11. }
  12. // use
  13. 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)。要把无尽的可观察对象转换成有限的,可以使用 firstlasttaketakeUntil 等过滤型管道对其进行处理。

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

创建验证器类

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

在template中使用:

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

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

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

对于模板驱动表单:

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

对于响应式表单:

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