CODEWITHSUNDEEP
javascriptangular
Walter Sung
Walter Sung

Reputation: 140

How to bind dynamically created form fields to an object in Angular 2?

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?

Upvotes: 1

Views: 929

Answers (1)

Roman C
Roman C

Reputation: 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>

Upvotes: 3

Related Questions