如何将动态创建的表单字段绑定到Angular 2中的对象？

Question

Using Angular 2 I'm trying to build a generic form for an arbitrary object by dynamically creating input fields for each attribute.

Given an object entity I loop through each attribute, using a pipe to get the array of attributes.

A field is created for each attribute key which I then want to bind back to the entity .

Here is the code:

<tr *ngFor="let key of entity | keys">
  <td><label for="{{key.key}}">{{key.key}}</label></td>
  <td><input id="{{key.key}}" type="text" [(ngModel)]="key.value"></td>
</tr>

So the problem is that the fields are bound using [(ngModel)]="key.value" to the keys rather than to entity .

Is there any way to bind the field to the entity instead?

Or is there another way to update the values on the entity?

Answer 1

Use an index in ngFor to bind the entity value.

<tr *ngFor="let key of entity | keys;let i = index">
  <td><label for="{{key.key}}">{{key.key}}</label></td>
  <td><input id="{{key.key}}" type="text" [(ngModel)]="entity[i].value"></td>
</tr>