Angular 4 - 我可以使用ngFor动态创建表单吗?

Question

我正在尝试使用 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>

我在这里吠错了树吗？如果这可以工作，如何从组件中访问每个输入字段(会有更多(？以及如何获取行中每个字段的值(而不仅仅是最后更改的字段(。

Answer 1

有很多方法可以解决这个问题。

你有没有看过这个例子：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