Angular如何在模板驱动表单中自定义校验器

引言

模板驱动表单相比较响应式表单能够少更少的代码作一样的事情，可也损失了自由度与更易测试，固然不少人并不在意啦。

因此我相信不少人在编写Angular不自由自主去更倾向于模板驱动表单的写法。

表单最核心的是校验体验，在Angular中简直就是发挥到了极致，好比：required、min、max、pattern 等，这些本来是HTML DOM元素中的表述，而Angular默认实现了一整套的校验指令，好比：required 对应 RequiredValidator。

而后不少时候咱们须要一些特殊的校验，好比：数据比较、远程校验等。那在模板驱动表单风格中咱们要如何优雅的实现这样一个校验器呢？

1、Angular是如何校验？

通常在编写一个手机文本框多是这样：

<input [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
    <p *ngIf="mobile.errors.required">手机号必填</p>
    <p *ngIf="mobile.errors.pattern">手机号格式不正确</p>
</div>

以上几行很友好的实现从必填项、格式进行校验，而这一切都是依靠 [(ngModel)] 统一采集，得以只须要利用一个模板引用变量访问到每一个校验指令的错误信息。

一、[(ngModel)] 到底作了什么？

在解析这个问题前须要先了解一下 RequiredValidator 是如何定义的。

@Directive({
  providers: [{
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => RequiredValidator),
      multi: true
    }]
})
export class RequiredValidator {}

只看最核心向 NG_VALIDATORS 标识符注册一个 RequiredValidator 指令。这样就可使 ngModel 指令中注入 NG_VALIDATORS 后就能获得这个指令对象。

ngModel 我把它简化了一下：

export class NgModel extends NgControl {
    constructor(@Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>) {}
    
    get validator(): ValidatorFn|null {
        // 各类校验并返回结果
    }
}

有关更多ng_model.ts能够深刻阅读源代码。

Angular会在每一次表单值变动时，对全部的表单中已经安装的校验器进行一次遍历。

2、编写一个校验器

诚如 required 校验器同样，依然是把自定义校验器挂到 NG_VALIDATORS 当中。假如咱们但愿手机文本框只能输入 159 开头的一个校验器。

定义Directive

@Directive({
    selector: '[user-mobile]',
    exportAs: 'userMobile',
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => UserMobileDirective),
        multi: true
    }]
})
export class UserMobileDirective {}

一个很是普通的指令定义方法，只是多了一个将 UserMobileDirective 注册到 NG_VALIDATORS 标识符当中而已。别问我为何，一种约定。

类

export class UserMobileDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        let value: string = c.value || '';
        if (!value.startsWith('159')) {
            return {
                mobile: {
                    msg: '手机号必须是159开头',
                    actualValue: value
                }
            };
        }
        return null;
    }
}

只须要实现 Validator 接口的 validate 方法便可。

从 c 中获取DOM值，当遇到非 159 开头时，返回一个用于表述消息的对象便可，不然返回一个 null。这个对象会被统一采集在 ngModel.errors 对象下面。故而，只须要在DOM元素加上 user-mobile 指令便可。

<input user-mobile [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" id="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
    <p *ngIf="mobile.errors.required">手机号必填</p>
    <p *ngIf="mobile.errors.mobile">{{mobile.errors.mobile.msg}}</p>
</div>

接口还包括一个 registerOnValidatorChange 可选方法，当某些其它外部属性的变动时，容许从新手动触发校验。

3、异步校验器

若是说用户手机校验器须要检查手机是否为黑名单的状况下，正常黑名单数据都存在远程当中。这样状况下须要发送HTTP请求，而这一过程就是异步。

Angular针对这类异步校验有独立的另外一个标识符，即：NG_ASYNC_VALIDATORS，而其它代码都是相通的。

@Directive({
    selector: '[user-async]',
    exportAs: 'userAsync',
    providers: [{
        provide: NG_ASYNC_VALIDATORS,
        useExisting: forwardRef(() => UserAsyncDirective),
        multi: true
    }]
})
export class UserAsyncDirective implements Validator {
    validate(c: AbstractControl): Observable<any> {
        return c.valueChanges
                // 去抖
                .debounceTime(300)
                // 抑制重复值
                .distinctUntilChanged()
                // 一、可使用flatMap进行远程校验
                // .flatMap(value => value)
                // 二、本地模拟判断
                .map((value: string) => {
                    if ([ '15900000001', '15900000002' ].includes(value)) {
                        return {
                            mobile: {
                                msg: '手机号为黑名',
                                actualValue: value
                            }
                        }
                    }
                    return null;
                })
                .first();        
    }
}

除了 NG_ASYNC_VALIDATORS 核心的结构彻底没有变更。

而对于 validate 方法返回的是一个 Observable 类型，利用对 valueChanges 的订阅能够制做一些像去抖动做。

而最后必须使用 first() 作为结尾，缘由每一次校验，对于结果而言只容许一个。

结论

本章介绍的是如何对模板驱动表单建立自定义校验器，它相比较响应式表单自定义校验器略为复杂一些。可是实际运用中，咱们不该该只为某个构建表单风格作一种自定义校验器，应该两者是共存的。

好比上面 159 开头的示例。更合理的编写方式应该是将校验逻辑独立：

export class MyValidators {
    static checkMobile(value: string): ValidationErrors|null {
        return !value.startsWith('159') ? { mobile: { msg: '手机号必须是159开头' } } : null;
    }
}

// 校验器类
export class UserMobileDirective implements Validator {
    validate(c: AbstractControl): { [key: string]: any; } {
        let value: string = c.value || '';
        return MyValidators.checkMobile(value);
    }
}

这样，同一个校验器，不论是模板驱动表单仍是响应式表单，都能是通用的。

Happy coding!