我已经创建了2个自定义表单验证器两个都在起作用,但是当我在模板中使用NGIF条件时,消息没有显示。但是,对于在验证器中构建消息,消息正在显示。这两个验证器都在组件中注册,并且控制台中没有错误。
组件模板:
<label for="username">Username</label>
<input formControlName='username' type="text" id="username" class="form-control">
<div *ngIf="username.touched && username.invalid">
<span class="text-danger" *ngIf='username.errors.required'>Username is required</span>
<span class="text-danger" *ngIf="username.errors.minlength">Username should be min {{ username.errors.minlength.requiredLength }} characters</span>
<span class="text-danger" *ngIf='username.errors.cannotHaveSpace'>Username can't have space (Custom Validation)</span>
<span class="text-danger" *ngIf="username.errors.shouldBeUnique">Username is already taken (Custom Validation)</span>
</div>
验证器代码:
static cannotHaveSpace(control: AbstractControl) : ValidationErrors | null{
if((control.value as string).indexOf(' ')>=0)
return {cantHaveSpace: true};
return null;
}
static shouldBeUnique(control: AbstractControl): Promise< ValidationErrors | null >{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(control.value=='Saad')
resolve({shouldbeUniqe:true});
else resolve(null);
},2000)
});
}
您有错字...
*ngIf="username.errors.cannotHaveSpace"
*ngIf="username.errors.shouldBeUnique"
应该是...
*ngIf="username.errors.cantHaveSpace"
*ngIf="username.errors.shouldbeUniqe"
不显示您的TS代码,但请确保将异步验证器标记为其自己的数组中的第三个参数:)