Angular Реактивные формы не могут получить formControlName для установки значения в цикле шаблона ngFor - PullRequest
Новая
       6

Angular Реактивные формы не могут получить formControlName для установки значения в цикле шаблона ngFor

0 голосов
/ 04 апреля 2020

Я использую Angular реактивных форм, и я пытаюсь получить значение элемента управления формы для установки в качестве значения по умолчанию в раскрывающемся списке. Я могу заставить это работать, если я не использую * ngFor l oop в моем коде шаблона. Однако мне нужно использовать это, так как у меня будет много опций в теге. 

    <select formControlName="staffName">
       <option>Bob Jason</option>
       <option>Sally Reel</option>
       <option>Jack Jones</option>  
       <option>George Smith</option>  
       <option>Harry Lake</option>  
    </select>

Однако, если я использую приведенный ниже код, он не будет работать 

     <select formControlName="staffName">
        <option *ngFor="let StaffMemberModel of StaffMemberModels">
            {{StaffMemberModel.firstName}} {{StaffMemberModel.lastName}}
        </option>      
     </select>

StaffMemberModel - это массив объектов, который содержит id, firstName и lastName, как показано ниже.

enter image description here

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

enter image description here

1 Ответ

1 голос
/ 04 апреля 2020

Вы можете сделать это, передав флаг [value]="StaffMemberModel.id".

Это может быть firstName, lastName, ID, что вы хотите. 

<form [formGroup]="form">
  <select formControlName="staffName">
    <option *ngFor="let StaffMemberModel of StaffMemberModels"
    [value]="StaffMemberModel.id" > 
      {{ StaffMemberModel.firstName }} {{ StaffMemberModel.lastName }}</option>
  </select>
</form>

Если вы хотите увидеть это в действии: https://stackblitz.com/edit/angular-w8bjyl

...