Angular 4自定義驗證器ng如果不顯示錯誤<span>

我已經創建了2個自定義表單驗證器，它們都在工作，但是當我在模板中使用ngIf條件時，消息不顯示。但是，爲了構建驗證器，消息正在顯示。這兩個驗證器都在組件中註冊，並且控制檯中沒有錯誤。Angular 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) 
    }); 
}

來源

2017-09-01 Saad Zafar

你檢查的第三個參數，如果您的驗證被稱爲 –

你得到，如果你加上'{顯示的東西{username？.errors？.shouldBeUnique}}''ngIf's之外？ –

當我添加{{username.errors.shouldBeUnique}}時，我什麼也沒得到。但驗證器正在工作，當我檢查輸入元素，並通過角度看類的分配 –

你有錯別字......

*ngIf="username.errors.cannotHaveSpace" 
*ngIf="username.errors.shouldBeUnique"

應該是...

*ngIf="username.errors.cantHaveSpace" 
*ngIf="username.errors.shouldbeUniqe"

不顯示你的TS碼，也確保異步驗證被標記爲它自己的數組:)

來源

2017-09-01 17:45:33 Alex

Angular 4自定義驗證器ng如果不顯示錯誤<span>

回答

相關問題