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://bjjierui.cn/article/dspgjd.html