Perfect! Many thanks Jakub :)
On Thursday, August 11, 2016 at 11:17:58 PM UTC+1, Jakub Beránek wrote:
>
> 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.
