1
2つのカスタムフォームバリデーターを作成しましたが、両方とも機能していますが、テンプレートでngIf条件を使用するとメッセージが表示されません。しかし、バリデータをビルドする場合は、メッセージが表示されます。これらのバリデータは両方ともコンポーネントに登録されており、コンソールにエラーはありません。角4カスタムバリデーターngエラーを表示しない<span>
コンポーネントテンプレート：
<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)
});
}
バリデーターが呼び出されているかどうかを確認しました –
' {username？.errors？.shouldBeUnique}} '' * ngIf''の外側にありますか？ –
{{username.errors.shouldBeUnique}}を追加すると何も表示されません。 しかし、バリデータは、入力要素を検査し、角度でクラスを割り当てるのを見ているときに働いています –