ngControlStatus（有效、无效、原始、脏等）在 <select> 上不起作用答案

【问题标题】：ngControlStatus (valid, invalid, pristine, dirty, etc.) not working on <select>ngControlStatus（有效、无效、原始、脏等）在 <select> 上不起作用
【发布时间】：2018-04-30 07:39:13
【问题描述】：

我正在尝试进行一些表单验证，并且由于某种原因，当我尝试使用 myTest.pristine 的条件向我的选择添加一个类时，没有任何反应。但是，这在常规输入上效果很好。请参阅下面的示例。

<div class="form-group" [class.has-error]="hasPrimaryLanguageError && primaryLanguage.pristine">
  <label>Primary Language *</label>
  <select  class="form-control" #primaryLanguage name="primaryLanguage" [(ngModel)]="model.primaryLanguage">
    <option value="default">Select a Language...</option>
    <option *ngFor="let lang of languages">{{ lang }}</option>
  </select>
  <div *ngIf="hasPrimaryLanguageError && primaryLanguage.pristine" class="alert alert-danger">Required</div>
</div>

【问题讨论】：

标签： angular angular2-forms angular-forms angular4-forms control-state

【解决方案1】：

进一步研究后，我发现我的#primaryLanguage 未设置为等于 ngModel。这解决了我的问题。

【讨论】：

【解决方案2】：

您的默认值需要为空，即；

<option value="">Select a Language...</option>

并且还初始设置

model.primaryLanguage = "";

所以你的最终代码将是

<div class="form-group" [class.has-error]="hasPrimaryLanguageError && primaryLanguage.pristine">
    <label>Primary Language *</label>
     <select  class="form-control" #primaryLanguage name="primaryLanguage" [(ngModel)]="model.primaryLanguage" required>
       <option value="">Select a Language...</option>
       <option *ngFor="let lang of languages" value="{{yourlanguaugeid}}">{{ lang }}</option>
     </select>
     <div *ngIf="hasPrimaryLanguageError && primaryLanguage.pristine" class="alert alert-danger">Required</div>
 </div>

【讨论】：