如何实现required in select box in Angular 5？

Question

我在 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>

正如您在上面看到的，我有国家列表和另一个通知用户 select 的选项。问题是我不确定 how/when Angular 是否将此字段标记为无效？我 select "Please select..." 并且我可以在开发人员工具中看到 class 是 ng-untouched ng-pristine ng-valid 谢谢！

Answer 1

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

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

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

check this example on stackblitz

如何实现required in select box in Angular 5？

How to achieve required in select box in Angular 5?

angular

angular-forms