I did a bit more investigation and seems like I made a mistake in the HTML
template. I need to ensure that the *input* elements have unique *name*s
for each iteration of the **ngFor*.
So the working version is as follows:
<div>
<form name="myForm">
<div *ngFor="let item of items; let index=index">
<label>{{item.name}}: </label><input name="{{'name'+index}}" type
="text" [(ngModel)]="item.name"/>
<label>{{item.value}}: </label><input name="{{'value'+index}}"
type="text" [(ngModel)]="item.value"/>
</div>
</form>
</div>
On Thursday, August 11, 2016 at 4:24:00 PM UTC+1, Anjum Naseer wrote:
>
> Hi,
>
> I cannot seem to get *ngModel* working correctly when it appears inside
> an *ngFor*. I have created a simple app that demonstrates the issue here:
> Plunker
> Demo <http://plnkr.co/edit/dRc7s2O6nf6qvEwrsob4?p=preview>
>
> The HTML template in the demo (defined in *src/app.ts*) is:
> <div>
> <form name="myForm">
> <div *ngFor="let item of items">
> <label>{{item.name}}: </label><input name="name" type="text"
> [(ngModel)]="item.name"/>
> <label>{{item.value}}: </label><input name="value" type="text"
> [(ngModel)]="item.value"/>
> </div>
> </form>
> </div>
>
> This is looping over an *items* array that is defined in the same file as:
> export class App {
> constructor() {
> this.items = [
> {name: 'Item 1', value: '123'},
> {name: 'Item 2', value: '456'}
> ];
> }
> }
>
> I expected to see a form containing these two rows:
>
> Item 1: [Item 1] 123: [123]
> Item 2: [Item 2] 456: [456]
>
> but what I actually get is:
>
> Item 1: [Item 2] 123: [456]
> Item 2: [Item 2] 456: [456]
>
> It seems like *ngModel* is not able to track the correct properties.
>
> Am I doing something wrong here?
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
