Как динамически генерировать mat-select внутри ngFor - PullRequest
Новая
       12

Как динамически генерировать mat-select внутри ngFor

0 голосов
/ 18 июня 2019

Я использую Angular 7 и Angular Material 6.4.1.У меня есть форма с разделом для сотрудников.По умолчанию форма имеет одну пустую информацию о сотрудниках, которую можно выбрать, но можно добавить больше сотрудников, поэтому мне нужно будет повторить (массив ngFor для сотрудников) весь раздел.В разделе есть требуемые кратные значения mat-select с указанием их formControl, но когда я устанавливаю mat-select внутри ngFor и нажимаю кнопку, чтобы добавить нового сотрудника, весь раздел дублируется. ВСЕ события запуска mat-select имеют hasError и становятся красными.Массив Employees: otEmployees - по умолчанию один пустой Я пытался создать динамические имена для FormControls, чтобы у каждого объекта emp был массив formControls 

<code><pre>
<div *ngFor="let emp of otEmployees; let i = index" id="bottomLine">

            <div fxLayout="row" fxLayout.xs="column">
              <div>
                <mat-label >Employee ID </mat-label>
                <mat-label >{{emp.employeeId}}</mat-label>
              </div>

              <div>
                <mat-form-field>
                  <mat-label>Employee Name</mat-label>
                  <mat-select [formControl]="emp.emploFormControls[0]" required [(ngModel)]="emp.employeeName">
                    <mat-option>Select --</mat-option>
                    <mat-option *ngFor="let conseq of consequencesIfNotDone" [value]="conseq">`enter code here`
                      {{conseq.consequence1}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="selectedDivisionId < 1">Please choose a Division first</mat-error>
                  <mat-error *ngIf="emp.emploFormControls[0].hasError('required') && selectedDivisionId >= 1">Please choose an Employee
                    Name</mat-error>
                  <mat-hint>{{emp.emploFormControls[0].value?.sound}}</mat-hint>
                </mat-form-field>
              </div>
</div>
</div>
</div>

Ожидается, что дублирует раздел с матом-выбрать и каждый работает независимо.Текущее поведение происходит, когда дублируется весь триггер выбора мата hasError и становится красным.

...