-
创建自定义验证器的命令
ng generate directive forbidden-name(自定义床啊金验证器的名称)
-
生成的文件内容
import { Directive } from '@angular/core';
@Directive({
selector: '[appForbiddenName]'
})
export class ForbiddenNameDirective {
constructor() { }
}
-
创建一个文件用来放置正则判断的验证器算法。validatot.ts
import { ValidatorFn, AbstractControl } from '@angular/forms';
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
// 返回一个具有验证性函数
return (control: AbstractControl): { [key: string]: any } | null => {
console.log("control.value=",control.value)
// control.value控件的值
const forbidden = nameRe.test(control.value);
console.log("forbidden=",forbidden)
// 下面是三目运算符,当forbidden为false的时候,返回null,当forbidden为true的时候,返回{'forbiddenNAme':{value:control.value}}
return forbidden ? { 'forbiddenName': { value: control.value } } : null;
};
}
-
在刚刚生成的自定义验证器中继承并实现一个接口
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
import { forbiddenNameValidator } from './validator';
@Directive({
selector: '[appForbiddenName]', // 指令作为属性使用
providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
})
export class ForbiddenNameDirective implements Validator {
@Input('appForbiddenName') forbiddenName: string; // 获取指令值
// 指令实现接口,也就是说,在调用这条指令的时候,就已经能够启动这个函数
validate(control: AbstractControl): {[key: string]: any} | null {
// 键值对:map[key:string]any {[key: string]: any} | null接收返回值的类型有键值对或者是NULL
console.log("control:",control)
console.log("forbiddenName=",this.forbiddenName)
// 还是三目运算符,this.forbidden为空的时候,不进行匹配
return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control): null;
}
constructor() { }
}
有一个关键的地方是,实现Validator接口之后,要能够给全局的模板都能够实现,要注册。注册的密钥是angular固定提供的一种NG_VALIDATORS。注册的具体语句:
providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
-
使用模板自定义的方法
<div>
<label for="name">姓名:</label>
<input id="name" class="form-control" ngModel name="name" #name='ngModel' appForbiddenName="bob" required
minlength="3" style="width: 200px;height: 30px;">
</div>
<!-- forbiddenName="bob" 自定义的 -->
<div *ngIf="name.invalid &&(name.dirty||name.touched)">
<div *ngIf="name.errors.required">
Name is required
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 3 characters long.
</div>
<!-- appForbiddenName="bob"说明这个控件绑定了一个验证器,{ 'forbiddenName': { value: control.value } } 这个是返回值,有值则出现,无值就不出现 -->
<div *ngIf="name.errors.forbiddenName">
Name cannot be Bob.
</div>
</div>
原文地址:https://www.cnblogs.com/MyUniverse/p/11965581.html
时间: 2024-11-06 19:44:12