Good catch :-)
You can simplify the input name binding slightly by using the property
syntax
<input [name]="'name' + index" />
On Thursday, August 11, 2016 at 11:35:16 PM UTC+2, Anjum Naseer wrote:
>
> 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.
