Angular6 - Reactive Forms - не может программно установить опцию выбора при использовании объектов и [selected] привязки

Question

Серьезно озадачен здесь. У меня есть две реактивные формы в проекте Angular.

Оба имеют элемент управления select с опциями, хранящимися в переменных класса.

Одна форма использует простые строки опций для опций сотрудника, например:

["Dan Smith", "Mark Johnson", etc.]

Другая форма использует объекты, как в:

[
  {
    value: "Dan Smith",
    selected: false,
    hidden: false
  },
  ...
]

Пример Stackblitz: https://stackblitz.com/edit/angular-nks51y

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

Кнопки работают на форме, которая использует простые строки, но не работают с формой, использующей объекты {}.

Кроме того, значение по умолчанию isn ' установить с формой объекта.

Я знаю, что что-то упустил, но не могу понять, что.

Answer 1

В вашем коде есть две ошибки:

1. вы должны никогда установить атрибут selected элемента select. Суть привязки заключается в том, что выбранная опция является той, которая установлена ​​в качестве значения элемента управления формы. Модель является источником правды, а не представления

2. Выбранное значение (т. Е. Значение FormControl) является объектом: сам объект сотрудника. Но ngValue, используемый в шаблоне, это name.value, то есть строка, которая является значением объекта сотрудника. Объект сотрудника не может быть === для его свойства value.

Поэтому код должен быть:

<select formControlName="employeeName">
  <option *ngFor="let employee of employeeNameObjectOptions" [ngValue]="employee" [hidden]="employee.hidden">
    {{ employee.value }}
  </option>                
</select> 

Обратите внимание, что я решил переименовать name до employee, поскольку переменные ссылаются на него: сотрудник, а не имя. Удачное именование помогает понять ошибки.

Ваша фиксированная демоверсия: https://stackblitz.com/edit/angular-pundfg?file=src%2Fapp%2Fapp.component.html

Answer 2

ngValue для выбранной вами опции - это строка [ngValue]="name.value", а тип не соответствует, когда вы устанавливаете объект.

<option *ngFor="let name of employeeNameObjectOptions" [selected]="name.selected" [ngValue]="name" [hidden]="name.hidden">
        {{ name.value }}
</option>