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