ngControlStatus (действительный, недействительный, нетронутый, грязный и т. д.) не работает на ‹select›

Я пытаюсь выполнить некоторую проверку формы, и по какой-то причине, когда я пытаюсь добавить класс в свой выбор с условием 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 angular-forms angular2-forms angular4-forms control-state
person lblankenship    schedule 16.11.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Изучив это дальше, я обнаружил, что мой #primaryLanguage не был установлен равным ngModel. Это решило мою проблему.

person lblankenship    schedule 21.11.2017

arrow_upward
0
arrow_downward

Ваше значение по умолчанию должно быть пустым, т.е.

<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>
person J Sulivan    schedule 21.11.2017