Angular实现模版驱动表单的自定义校验功能(密码确认为例)-创新互联
HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择, 需要到请求到服务端取值验证等等···这里以密码确认为例进行说明。
十年的密云网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整密云建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“密云网站设计”,“密云网站推广”以来,每个客户项目都认真落实执行。指令开发
表单的验证状态是通过 formContro l的 errors 属性反馈出来的,所以基本的思路肯定就是需要添加校验规则,然后将验证结果添加到formControl实例的errors属性中。那么问题来了,模版驱动表单的控制都是在HTML模版中完成的,无法直接接触到 formControl实例。这个时候就需要使用指令了,将检验规则进行包装。Angular提供了 验证器供应商 NG_VALIDATORS ,用于处理表单自定义校验。先创建指令。
import { Directive} from '@angular/core'; import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms'; @Directive({ selector: '[appConfirmpsw]', providers: [{ provide : NG_VALIDATORS, useExisting : ConfirmpswDirective, multi: true }] }) export class ConfirmpswDirective implements Validator { constructor() { } validate(control: AbstractControl): {[key: string]: any} { //检验规则 } }
网站标题:Angular实现模版驱动表单的自定义校验功能(密码确认为例)-创新互联
网站路径:http://hbruida.cn/article/dspgjd.html