Angular 4 - Can I create a form dynamically with ngFor?

Viewed 5889

I'm trying to dynamically create an editable form with ngFor. Basically, a data grid and that's what I'd be using some other systems--maybe that's the way I should go, but I tried this first.

<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>

Am I barking up the wrong tree here? If this can work, how do I access each input fields (there would be more) from within the component? And how do I get the values of every field in the row (not just the one that changed last).

1 Answers
Related