超時設置爲無角從驗證消息ngIF

嗨，我是採用了棱角分明（4）和我有一個自定義的驗證，並通過ngIF超時設置爲無角從驗證消息ngIF

inValid(fieldName: string) { 
    return (
    this.form.get(fieldName).hasError('pattern') && 
    this.form.get(fieldName).dirty && 
    !this.required(fieldName) 
); 
}

顯示它，我希望延遲return響應，使得用戶有時間在錯誤（如果有）消息顯示之前鍵入幾個字符。 name是有問題的字段的值。即的firstName

HTML

<div *ngIf="inValid(fieldName)" class="error-message"> 
    Invalid 
</div>

理想像什麼在電子郵件字段用於在https://twitter.com/signup我不想提前使用.touched

感謝。

來源

2017-07-28 fidev

您也可以利用表單控件的valueChanges觀察到rxjs操作debounceTime延遲響應：

進口 'rxjs /添加/運營/ debounceTime';在組件中。

2.在訂閱中，您可以設置一個組件級別的變量，它包含inValid函數的結果，並且在html中需要將此變量綁定到div以切換錯誤消息。

this.form.get（「name」）。valueChanges.debounceTime（1000） .subscribe（data => this.error = this.inValid（data））;

<div *ngIf="isError" class="error-message"> Invalid </div>

注： - 你也可以訂閱表單元素水平valueChanges編寫所有表單域的常見解決方案。有關詳細信息，請參閱angle doc中的ValueChanged函數。

來源

2017-07-29 04:34:57

我建議你會使用異步驗證器。這是一個例子。

異步驗證需要申報任何同步驗證器經過這麼：

this.myForm = this.fb.group({ 
    name: ['', [], this.asyncValidator] 
});

這裏是你的異步驗證可能看起來怎麼樣，在這裏我剛剛設置兩個自定義驗證，一個檢查字段不爲空，其他檢查該字段有至少4個字符：

asyncValidator(control: FormControl): Promise<any> | Observable<any> { 
    const promise = new Promise<any>((resolve, reject) => { 
    setTimeout(() => { 
     // empty 
     if (control.value === '') { 
     resolve({'req': true}); 
     } 
     // length 
     else if(control.value.length < 4) { 
     resolve({'minl':true}) 
     } 
     else { 
     // valid 
     resolve(null); 
     } 
    }, 1000); 
    }); 
    return promise; 
}

，然後你的模板看起來是這樣的：

<div *ngIf="!myForm.get('name').pristine"> 
    <small *ngIf="myForm.hasError('req', 'name')"> Required </small> 
    <small *ngIf="myForm.hasError('minl', 'name')"> Min 4 chars </small> 
</div>

所以現在有了這個驗證器，在超時的情況下，延遲顯示錯誤消息。

來源

2017-08-01 12:12:25 Alex

超時設置爲無角從驗證消息ngIF

回答

相關問題