Angular 4-Могу ли я создать форму динамически с помощью ngFor?

Я пытаюсь динамически создать редактируемую форму с помощью ngFor. В основном, сетка данных, и это то, что я буду использовать некоторые другие системы-возможно, это то, как я должен идти, но я попробовал это сначала.

<form #employeeForm="ngForm">
      <tr *ngFor="let employee of newEmployees | filter:filterCriteria; let i = index" [class.active]="i == selectedRow" [attr.rowIndex]="i">
          <td class="clickable" (click)="showEmployee(i)">
             <div>{{employee.avatar}}</div>
          </td>
          <td>
            <md-input-container dividerColor="accent" >
             <input mdInput placeholder="name" value={{employee.name}} name="employee-name-{{employee.id}}" [(ngModel)]="employee-name-{{employee.id}}"/>
           </md-input-container>
        </td>
       ...
        <td>
       <md-icon (click)="saveEmployeeChanges(employee.id)">save</md-icon></td>
        </tr>
</form>

Я что, лаю не на то дерево? Если это может работать, как я могу получить доступ к каждому входному полю (их будет больше) из компонента? И как мне получить значения каждого поля в строке (а не только того, которое изменилось последним).

1 3
angular2-forms

1 ответ:

Есть множество способов решить эту проблему.

Видели ли вы это в качестве примера: https://angular.io/guide/dynamic-form

Но то, что у вас есть, тоже вариант. Вы можете изменить это: 

<md-icon (click)="saveEmployeeChanges(employee.id)">

К этому: 

<md-icon (click)="saveEmployeeChanges(employeeForm)">

, который передаст форму и все связанные с ней элементы управления в класс компонента.

Для доступа к элементам управления в форме можно использовать:

employeeForm.get('name').value;

Вы можете узнать больше в Angular docs здесь: https://angular.io/guide/reactive-forms#inspect-formcontrol-properties

3