如何在不触发验证错误的情况下将空默认选项插入下拉列表顶部？

Question

我正在使用Angular 2而我正在实施一个下拉列表。下拉列表中的第一个默认项应为空，因为系统没有用于推断用户默认选择的逻辑。用户需要从此下拉列表中选择一个值，因此下拉列表使用Angular 2表单的标准必需字段验证，如下所示：

 <div class="form-group">
   <label for="report">Report Type</label>
   <select class="form-control" required
     [(ngModel)]="model.reportType"
       name="reportType" #reportType="ngModel" >
     <option *ngFor="let r of reportTypes" [value]="r">{{r}}</option>
   </select>
   <div [hidden]="reportType.valid" class="alert alert-danger">
     Report Type is required
   </div>
 </div>

问题在于，在选择了空默认下拉列表的情况下初始化页面时，会触发并显示所需的字段验证。我确信在Angular 2表单中有一种结构化的方式来处理这个用例，因为这是一个相当常见的用例。你能为这个问题提出解决方案吗？

Answer 1

将您的错误div更改为：

<div [hidden]="reportType.pristine || reportType.valid" class="alert alert-danger">
  Report Type is required
</div>