如何在 Angular 5 的选择框中实现所需？答案

【问题标题】：How to achieve required in select box in Angular 5?如何在 Angular 5 的选择框中实现所需？
【发布时间】：2018-11-26 14:58:14
【问题描述】：

我在 Angular 5 应用中有以下模板：

<div class="form-group">    
    <select [(ngModel)]="trip.country.code" (ngModelChange)="onSelectCountry($event)" name="country" required>
        <option>Please select...</option>
        <option *ngFor="let c of countries" value= {{c.country.code}}>{{c.country.name}}</option>
    </select>    
</div>

正如您在上面看到的，我有国家列表和另一个选项来通知用户选择。问题是我不确定Angular如何/何时将此字段标记为无效？我选择“请选择...”，我可以在开发人员工具中看到该类是 ng-untouched ng-pristine ng-valid 谢谢！

【问题讨论】：

如果“请选择”不是一个选项，请不要将其作为选项提供。请改用（浮动）占位符。
@user 发布了一个完整的最小示例来重现该问题。我的猜测是您在 trip.country.code 中有一个实际代码，它不是可选代码列表的一部分。
如果我删除“请选择..”选项，选择将始终有效，因为将选择国家（第一个）。如果用户没有选择，我想显示错误。

标签： angular angular-forms

【解决方案1】：

我们在我们的应用程序中也遇到了类似的问题，我们通过以下方法解决了它。

我们想要的第一个选择选项，但我们不想接受它作为有效输入。所以只需将其标记为禁用，这将使用户可以使用该选项，但最终用户将无法选择它。代码如下：

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

check this example on stackblitz

【讨论】：

在您的示例中，我可以看到附加的类 ng-invalid 很好，但在我的代码中，它是 ng-valid，其中“请选择...”被选中。我有以下课程 ng-untouched ng-pristine ng-valid ng-dirty
@Ingo Bürk 提到不要将其作为选项，因为它不是有效的输入。