Angular使用指令来添加校验器

之前查阅资料的时候，对于NG中的校验器，一般用法都是在本组件下继承验证器Validator接口，再添加到NG表单中实现校验。

但是对于模板驱动型表单，一般的解决方法是使用将校验器添加到指令，或者说，创建一个自定义指令，在自定义指令中实现校验器。

@Directive({
  selector: '[customValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
})
class CustomValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors|null {
    return {'custom': true};
  }
}

再抽象一点，如果你的自定义指令很多，建议将自定义指令和校验函数分离开写。

@Directive({
  selector: '[customValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
})
class CustomValidatorDirective implements Validator {
    return bar();
  }
}

//注：另外新建一个.ts文件，写一个bar()函数 

//.ts文件中
export function bar(): ValidatorFn{
    if(true){
            return null
        }else{
        { 验证器名字: { value: 表单值, msg: '你的提示信息' } }
        } 

                          
}

这样当使用模板驱动时候就直接再<>标签内加入自定义指令。

总结:

模板驱动 ->  自定义指令中添加校验函数

表单驱动 -> Frombuilder中添加校验函数