如何在具有空值的Angular select元素上使用默認的「請選擇」選項進行驗證？

Question

我有選擇HTML元素的角度ngFor循環：

<select formControlName="type" required> 
    <option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option> 
</select> 

在Internet Explorer，在列表中的第一個項目時，模板負載選擇，但它的價值不在表單控件設置，因此會導致一個「必需的」驗證錯誤，直到列表中選中另一個值。我想要一個具有空值的「請選擇」選項來防止這種情況發生。

這是角2+有或沒有打字稿

Answer 1

使用添加選項，如下所示：

<option [ngValue]="null">Please select</option> 

所以你的控制將是這樣的：

<select formControlName="type" required> 
    <option [ngValue]="null">Please select</option> 
    <option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option> 
</select> 

這可以作爲角由於方括號檢查值屬性。該值成爲一個真正的null，不像如果我們使用value =「」（這只是一個空字符串，不匹配null）。