介绍提供者:,(
,,,{提供:NG_VALIDATORS,, useExisting:, ValidatorDirective,,多:,真正}
]才能 import {输入指令,,},得到& # 39;@angular/核心# 39;;
import {验证器,,AbstractControl,, NG_VALIDATORS},得到& # 39;@angular/形式# 39;;
@Directive ({
,,选择器:& # 39;[appValidator] & # 39;
,,,提供者:,
,,,,,{提供:NG_VALIDATORS,, useExisting:, ValidatorDirective,,多:,真正}
,,,)
}）
export class ValidatorDirective implements Validator {
@Input才能(& # 39;appValidator& # 39;),值:,字符串;
验证才能(控制:AbstractControl):,{,(关键:字符串):,any }, |, null {
,,,const validateMac =,/^ (([A-Fa-f0-9] {2} [:]) {5} [A-Fa-f0-9] {2} [,] ?) + $/;
,,,switch (this.value), {
,,,,,case & # 39; mac # 39;:
,,,,,,,return validateMac.exec(控制[& # 39;价值# 39;]),?,null :,{验证:真正的};
,,,,,,,休息;
,,,}
,,}
} import {ValidatorDirective},得到“. ./. ./共享/validator.directive";
@NgModule ({
进口:,才能
,,SharedModule
,,,
声明:,才能
,,ValidatorDirective
,,,
供应商:,才能
,,AuthGuard
,,,
}) & lt; nz-form-item>
,,,& lt; nz-form-control>
,,,,,& lt; nz-input-group>
,,,,,,,& lt; input formControlName=癿ac", nz-input 类型=皌ext",占位符=癿ac", appValidator=癿ac"比;
,,,,,& lt;/nz-input-group>
,,,,,& lt; nz-form-explain * ngIf=皏alidateForm.get (& # 39; mac # 39;) .dirty ,,, validateForm.get (& # 39; mac # 39;) .errors"比;
,,,,,,,请输入正确的Mac地址!
,,,,,& lt;/nz-form-explain>
,,,& lt;/nz-form-control>
& lt;才能/nz-form-item> & lt; nz-form-explain * ngIf=皏alidateForm.get (& # 39; mac # 39;) .dirty ,,, validateForm.get (& # 39; mac # 39;) .errors&, validateForm.get (& # 39; mac # 39;) .touched"比;
,,,,,,,请输入正确的Mac地址!
,,,,,& lt;/nz-form-explain>
这篇文章给大家介绍怎么在角中自定义字段校验指令,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>添加指令
<代码>//validator.directive共享。ts
注册到NG_VALIDATORS提供商中
角在验证流程中的识别出指令的作用,是因为指令把自己注册到了NG_VALIDATORS提供商中,该提供商拥有一组可扩展的验证器。
<强>实现验证器接口
ValidatorDirective写好后,只要把appValidator选择器添加到输入框上就可以激活这个验证器。
<强>在模板中使用
首先在模板所在的模块中引入该指令
在html中使用
在mac地址校验不通过时,错误信息便会显示。如果想在失去焦点时显示错误信息可以使用validateForm.get (& # 39; mac # 39;)。感动,如下:
关于怎么在角中自定义字段校验指令就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
