我尝试使用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>
我在这里咆哮错误的树吗?如果这可以工作,我如何从组件中访问每个输入字段(会有更多)?如何获取行中每个字段的值(而不仅仅是最后一个字段的值)。
答案 0 :(得分:3)
有很多方法可以解决这个问题。
您是否将此视为示例:https://angular.io/guide/dynamic-form
但你所拥有的也是一种选择。你可以改变这个:
<md-icon (click)="saveEmployeeChanges(employee.id)">
到此:
<md-icon (click)="saveEmployeeChanges(employeeForm)">
这会将表单及其所有相关控件传递给组件类。
要访问您可以使用的表单上的控件:
employeeForm.get('name').value;
您可以在此处的Angular文档中找到更多信息:https://angular.io/guide/reactive-forms#inspect-formcontrol-properties