CODEWITHSUNDEEP
angularkey-valuengmodel
Liam G
Liam G

Reputation: 791

Ng-Model not updating object from input tag (inside ngFor with keyvalue pipe)

I have a JSON object - whose keys are random - but in this instance I will use Id and Name as an example:

{Id: "someID", Name: "some name"}

And I am trying to display each key and value of this object - but allow the user to edit the value using an <input> tag.

<div>
    <p *ngFor="let item of data | keyvalue">
        Key: {{item.key}}: <input [(ngModel)]="item.value">, {{item.value}}, {{data[item.key]}}</p>
</div>

When the user makes a change to the input box, the input on the screen is changed (ie. item.value) - but the data object is not updated (ie. data[item.key]). I can use ngModelChange or (input)="onchange"($event, item.key)" or [(ngModel)]="data[item.key] to update the data object; however, this then causes the input box to lose focus, so only one character can be changed at one time.

I believe the problem lies somewhere with the keyvalue pipe - as I have no issues using pre defined keys ie. <input [(ngModel)]="data.id"> - but obviously because the keys within the object are random, I cannot use this.

So: Is there a way to use ngModel to update the value within the object. Or is there any other way to update the value of the object and display it on the screen and within the input box?

Upvotes: 2

Views: 1584

Answers (1)

yurzui
yurzui

Reputation: 214095

Changes are not reflected in data[item.key] because keyvalue pipe returns a new array of new objects with the same keys as in of original objects. This means that ngModel mutation will have no effect on original data object.

Your solution is to use square bracket notation with trackBy option:

html

<p *ngFor="let item of data | keyvalue; trackBy: trackByFn">
  Key: {{item.key}}: <input [(ngModel)]="data[item.key]">
        {{item.value}}, {{data[item.key]}}
</p>

ts

trackByFn(item) {
  return item;
}

Ng-run Example

Upvotes: 5

Related Questions