Angular如何在模板驱动表单中自定义校验器
引言
模板驱动表单相比较响应式表单可以少更少的代码做同样的事情，可也损失了自由度与更易测试，当然很多人并不在乎啦。
所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法。
表单最核心的是校验体验，在Angular中简直就是发挥到了极致，比如：
然后很多时候我们需要一些特殊的校验，比如：数据比较、远程校验等。那在模板驱动表单风格中我们要如何优雅的实现这样一个校验器呢？
一、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>
以上几行很友好的实现从必填项、格式进行校验，而这一切都是依靠
1、[(ngModel)] 到底做了什么？
在解析这个问题前需要先了解一下 RequiredValidator 是如何定义的。
({providers: [{provide: NG_VALIDATORS,useExisting: forwardRef(() => RequiredValidator),multi: true}]
})
export class RequiredValidator {}
只看最核心向
export class NgModel extends NgControl {constructor(@Inject(NG_VALIDATORS) validators: Array) {}get validator(): ValidatorFn|null {// 各种校验并返回结果}
}
有关更多ng_model.ts可以深入阅读源代码。
Angular会在每一次表单值变更时，对所有的表单中已经安装的校验器进行一次遍历。
二、编写一个校验器
诚如
定义Directive
({selector: '[user-mobile]',exportAs: 'userMobile',providers: [{provide: NG_VALIDATORS,useExisting: forwardRef(() => UserMobileDirective),multi: true}]
})
export class UserMobileDirective {}
一个非常普通的指令定义方法，只是多了一个将
类
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;}
}
只需要实现
从
<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 可选方法，当某些其它外部属性的变更时，允许重新手动触发校验。
三、异步校验器
如果说用户手机校验器需要检查手机是否为黑名单的情况下，正常黑名单数据都存在远程当中。这样情况下需要发送HTTP请求，而这一过程就是异步。
Angular针对这类异步校验有独立的另一个标识符，即：
({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()// 1、可以使用flatMap进行远程校验// .flatMap(value => value)// 2、本地模拟判断.map((value: string) => {if ([ '15900000001', '15900000002' ].includes(value)) {return {mobile: {msg: '手机号为黑名',actualValue: value}}}return null;}).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);}
}
这样，同一个校验器，不管是模板驱动表单还是响应式表单，都能是通用的。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！