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

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

最佳答案

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

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

关于Angular 4 - 我可以使用 ngFor 动态创建表单吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44939942/

10-11 23:24
查看更多