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

【问题标题】：Angular 4 - Can I create a form dynamically with ngFor?Angular 4 - 我可以使用 ngFor 动态创建表单吗？
【发布时间】：2017-07-07 04:32:42
【问题描述】：

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

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

【问题讨论】：

标签： angular 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 文档中找到更多信息：https://angular.io/guide/reactive-forms#inspect-formcontrol-properties

【讨论】：

谢谢@deborahk，这很有帮助。正如您所写，在将表单传递给 save 方法后，我能够使用 employeeForm.controls 获取控件集合。但即使谷歌搜索，我也找不到获取集合中特定控件值的语法。我试过：employeeForm.getControl("employee-name-1").value,employeeForm.get["employee-name-1"].value,employeeForm["employee-name-1"].value,employeeForm。 [0].值。只是似乎无法得到它。
我有一门关于使用 Angular 构建表单的课程，涵盖了所有这些内容。你可以在这里找到它：app.pluralsight.com/library/courses/angular-2-reactive-forms/…你可以在网站上注册免费一周。
我也会更新我的答案来回答这个问题。
再次感谢。我试过了，我收到一个错误：“employeeForm.get 不是函数” saveEmployeeChanges(employeeID: string, employeeForm: FormGroup) { console.log("Value: ",employeeForm.get('employee-name-1' ）。价值）; ... }
我明白了！谢谢@deborahk。 console.log("Value:",employeeForm.controls["employee-name-" + employeeID].value);