如何在 Angular 选择元素上使用默认的“请选择”选项并使用 null 值进行验证？

Question

我在 Angular ngFor 循环中有一个选择 HTML 元素：

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

在 Internet Explorer 中，加载模板时会选择列表中的第一项，但它的值未在表单控件中设置，因此会导致“必需”验证错误，直到在列表中选择另一个值为止。我想要一个具有空值的“请选择”选项，以防止发生这种情况。

这适用于使用或不使用 TypeScript 的 Angular 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>

这是因为 Angular 由于方括号而检查 value 属性。该值变为真正的 null，与我们使用 value="" 不同（这只是一个空字符串，与 null 不匹配）。