Невозможно правильно заполнить выбор с помощью ngFor - PullRequest
Новая
       9

Невозможно правильно заполнить выбор с помощью ngFor

0 голосов
/ 16 октября 2018

Я пытаюсь создать select в своем приложении Angular на основе массива classificationsList из компонента.На данный момент представление инициируется с первым уже выбранным значением, но проверка помечает его как недопустимый ответ.

default but not valid

Если я выберу раскрывающийся список и выберу другую опцию, он вернётся действительным.

(до выбора)

enter image description here

(после выбора)

enter image description here

Но когда я возвращаюсь, чтобы выбрать "Класс 1", он снова становится недействительным.

Я ожидаю, что это будет иметь пустую опцию по умолчанию (как показано ниже), которая исчезает при выборе реальной опции.Разница между этими двумя списками заключается в том, что classificationsList является динамическим, тогда как список отделов является статическим.

enter image description here

enter image description here

Фактически я взял блок html из списка отделов и простодобавил кусок * ngFor.Может кто-нибудь сказать мне, что я делаю неправильно, здесь?Однако проблема заключается не только в валидации.Большая проблема заключается в том, что по умолчанию используется первое значение в массиве, а не пустое значение, такое как Department.Когда я помещаю пустую строку в первый элемент массива со стороны компонента, он выбирает пустое значение так же, как выбирает «Класс 1», как вы видели.

В действительности проверка выполняется нормально, так как пустая строка недопустима, а остальные элементы массива действительны.В этом случае, однако, есть пустая строка, все еще доступная в опции.

enter image description here

<div><label for="titleClass">Title Classification</label></div>
  <select name="titleClass" id="titleClass" ngModel required>
    <option *ngFor="let class of classificationsList">{{class}}</option>
  </select>
</div>

1 Ответ

0 голосов
/ 16 октября 2018

Я понял!Функциональность, которую я искал, требовала от меня установки значения по умолчанию (без привязки к массиву).Для этого я установил значение по умолчанию null, как показано ниже.

<div class="formBoxRows">
  <div><label for="titleClass">Title Classification</label></div>
  <select name="titleClass" id="titleClass" ngModel required>
    <option *ngFor="let class of classificationsList" [value]=null>{{class}}</option>
  </select>
</div>
...