Angular在模板驱动表单中自定义校验器的方法
引言
模板驱动表单相比较响应式表单可以少更少的代码做同样的事情,可也损失了自由度与更易测试,当然很多人并不在乎啦。
所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法。
表单最核心的是校验体验,在Angular中简直就是发挥到了极致,比如:required、min、max、pattern等,这些原本是HTMLDOM元素中的表述,而Angular默认实现了一整套的校验指令,比如:required对应RequiredValidator。
然后很多时候我们需要一些特殊的校验,比如:数据比较、远程校验等。那在模板驱动表单风格中我们要如何优雅的实现这样一个校验器呢?
一、Angular是如何校验?
一般在编写一个手机文本框可能是这样:
手机号必填
手机号格式不正确
以上几行很友好的实现从必填项、格式进行校验,而这一切都是依靠[(ngModel)]统一采集,得以只需要利用一个模板引用变量访问到每个校验指令的错误信息。
1、[(ngModel)]到底做了什么?
在解析这个问题前需要先了解一下RequiredValidator是如何定义的。
@Directive({ providers:[{ provide:NG_VALIDATORS, useExisting:forwardRef(()=>RequiredValidator), multi:true }] }) exportclassRequiredValidator{}
只看最核心向NG_VALIDATORS标识符注册一个RequiredValidator指令。这样就可以使ngModel指令中注入NG_VALIDATORS后就能得到这个指令对象。
ngModel我把它简化了一下:
exportclassNgModelextendsNgControl{ constructor(@Inject(NG_VALIDATORS)validators:Array){} getvalidator():ValidatorFn|null{ //各种校验并返回结果 } }
有关更多ng_model.ts可以深入阅读源代码。
Angular会在每一次表单值变更时,对所有的表单中已经安装的校验器进行一次遍历。
二、编写一个校验器
诚如required校验器一样,依然是把自定义校验器挂到NG_VALIDATORS当中。假如我们希望手机文本框只能输入159开头的一个校验器。
定义Directive
@Directive({ selector:'[user-mobile]', exportAs:'userMobile', providers:[{ provide:NG_VALIDATORS, useExisting:forwardRef(()=>UserMobileDirective), multi:true }] }) exportclassUserMobileDirective{}
一个非常普通的指令定义方法,只是多了一个将UserMobileDirective注册到NG_VALIDATORS标识符当中而已。别问我为什么,一种约定。
类
exportclassUserMobileDirectiveimplementsValidator{ validate(c:AbstractControl):{[key:string]:any;}{ letvalue:string=c.value||''; if(!value.startsWith('159')){ return{ mobile:{ msg:'手机号必须是159开头', actualValue:value } }; } returnnull; } }
只需要实现Validator接口的validate方法即可。
从c中获取DOM值,当遇到非159开头时,返回一个用于表述消息的对象即可,否则返回一个null。这个对象会被统一采集在ngModel.errors对象下面。故而,只需要在DOM元素加上user-mobile指令即可。
手机号必填
{{mobile.errors.mobile.msg}}
接口还包括一个registerOnValidatorChange可选方法,当某些其它外部属性的变更时,允许重新手动触发校验。
三、异步校验器
如果说用户手机校验器需要检查手机是否为黑名单的情况下,正常黑名单数据都存在远程当中。这样情况下需要发送HTTP请求,而这一过程就是异步。
Angular针对这类异步校验有独立的另一个标识符,即:NG_ASYNC_VALIDATORS,而其它代码都是相通的。
@Directive({ selector:'[user-async]', exportAs:'userAsync', providers:[{ provide:NG_ASYNC_VALIDATORS, useExisting:forwardRef(()=>UserAsyncDirective), multi:true }] }) exportclassUserAsyncDirectiveimplementsValidator{ validate(c:AbstractControl):Observable{ returnc.valueChanges //去抖 .debounceTime(300) //抑制重复值 .distinctUntilChanged() //1、可以使用flatMap进行远程校验 //.flatMap(value=>value) //2、本地模拟判断 .map((value:string)=>{ if(['15900000001','15900000002'].includes(value)){ return{ mobile:{ msg:'手机号为黑名', actualValue:value } } } returnnull; }) .first(); } }
除了NG_ASYNC_VALIDATORS核心的结构完全没有变动。
而对于validate方法返回的是一个Observable类型,利用对valueChanges的订阅可以制作一些像去抖动作。
而最后必须使用first()做为结尾,原因每一次校验,对于结果而言只允许一个。
结论
本章介绍的是如何对模板驱动表单创建自定义校验器,它相比较响应式表单自定义校验器略为复杂一些。但是实际运用中,我们不应该只为某个构建表单风格做一种自定义校验器,应该二者是共存的。
比如上面159开头的示例。更合理的编写方式应该是将校验逻辑独立:
exportclassMyValidators{ staticcheckMobile(value:string):ValidationErrors|null{ return!value.startsWith('159')?{mobile:{msg:'手机号必须是159开头'}}:null; } } //校验器类 exportclassUserMobileDirectiveimplementsValidator{ validate(c:AbstractControl):{[key:string]:any;}{ letvalue:string=c.value||''; returnMyValidators.checkMobile(value); } }
这样,同一个校验器,不管是模板驱动表单还是响应式表单,都能是通用的。
总结
以上所述是小编给大家介绍的Angular在模板驱动表单中自定义校验器的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!