Angular 自定义模板驱动表单验证指令

1.创建一个自定义指令

执行命令：

       ng g directive validator/check    

               directive   指令                 validator/check     文件目录

2.修改创建的自定义指令文件

// 创建的校验规则判断指令文件
import { Directive, Input } from "@angular/core";   // Input 父向子传值
import { Validator, ValidationError, NG_VALLDATORS } from "@angular/forms";
@Directive({
    selector: "appCheck",
    // 添加该属性
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: CheckDirective,
        multi: true
    }]
})
export class CheckDirective implements Validator {
    @Input("appCheck") data: any;  //"appCheck"指令名称    data重新起的名字
    constructor() { }
    // 必须实现的函数     control代表控制器包含当前组件信息
    validate(control): { [key: string]: ValidationErrors } {
        // 这里实现对数据的判断，可以进行正则表达式判断等等
        console.log(control, this.data);