Cannot Perform Two-way Binding in an Input Element Dynamically

Question

I have the following object in my typescript class:

export class XComponent {
    fields: [{ }];

    constructor() {
        this.fields = [
        {
            id: 'Id1',
            name: 'Field 1',
            value: 'lorem'
        },
        {
            id: 'Id2',
            name: 'Field 2',
            value: 'ipsum'
        },
        {
            id: 'Id3',
            name: 'Field 3',
            value: 'dolor'
        },];
    }
}

When I try to bind the value dynamically in an input element it binds the last value which is dolor.

<div *ngFor="let field of fields; index as i">
    <label>{{ field.name }}</label> <!-- This one is rendered correctly. -->
    <input type="text" [(ngModel)]="fields[i].value" />
</div>

Result

    Label: Field 1
    Input: dolor

    Label: Field 2
    Input: dolor

    Label: Field 3
    Input: dolor

Also if you use two way databinding, as the bottom answers mentioned keep in mind that two way databinding is pretty rxpensive, through the fact that you have to listen bidirectional. It's by far more efficient to use input and output events separately and provide them from a smart component. — Jonathan Stellwag
– Jonathan Stellwag, Commented Sep 26, 2018 at 6:09

Patricio Vargas · Accepted Answer · 2018-09-26 07:35:28Z

3

You don't need to pass the index anymore. You are looping thought an array of objects with the *ngFor

<div *ngFor="let field of fields;">
    <label>{{ field.name }}</label> <!-- This one is rendered correctly. -->
    <input type="text" [(ngModel)]="field.value" />
</div>

Here's a working demo https://stackblitz.com/edit/angular-fre6m5

edited Sep 26, 2018 at 7:35

answered Sep 26, 2018 at 6:03

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2018-09-26 06:01:20Z

1

just use [(ngModel)]="field.value"

<input type="text" [(ngModel)]="field.value" />

Demo

answered Sep 26, 2018 at 6:01

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

Cannot Perform Two-way Binding in an Input Element Dynamically

Result

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Result

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related