*ngFor how to bind each item in array to ngModel using index

Question

===final updated==

since I use ngModel in a form, I must add name attribue.

and my mistake is that I used same value as its name.

<form #myform="ngForm">
    <table>
      <tr *ngFor="let staff of staffs">
         <td><input name="name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

after I change to belows, my problem is resolved.

<form #my2form="ngForm">
   <table>
      <tr *ngFor="let staff of staffs;let i = index">
         <td><input name="staff.{{i}}.name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

==========

sorry, I can't remember why I use names[$index].Name instead of x.Name.

maybe years ago I meet some mistake using x.Name, and then made a habit of using index.

---updated-----

I need a inline edit table, two-way binding.

<table>
   <tr *ngFor="let x of names">
     <td><input [(ngModel)]="x.Name">{{x.Name}}</td>
   </tr>
</table>

let names = [
{ Name:'jim'},
{ Name:'tom'}
];

initially the pages shows:

blank text field; jim

blank text field; tom

after I type 'aaaaaa' in the first text field, it becomes:

aaaaaa; aaaaaa

blank text field; tom

I think the page initially would show:

jim; jim
tom; tom

so, my problem exactly is, why the initial value is missing?

Please check the docs first https://angular.io/docs/ts/latest/ — Günter Zöchbauer, Jan 14 '17 at 16:52
@TamasHegedus that might not work (not entirely sure) but I remember error messages that `[(ngModel)]="..."` doesn't work with template variables, but besides that, a good suggestion - definitely worth a try. — Günter Zöchbauer, Jan 14 '17 at 16:59

score 20 · Answer 1 · edited Jan 14 '17 at 16:52

20

It should be [ngModel]="..."

<table>
   <tr *ngFor="let x of names;let i = index;">
     <td>{{ i+ 1 }}</td>
     <td><input [(ngModel)]="names[i].Name">{{x.Name}}</td>
   </tr>
</table>

edited Jan 14 '17 at 16:52

micronyks

54,797
15
112
146

answered Jan 14 '17 at 16:51

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks @micronyks I wasn't sure if he wants 2-way binding. Is `ng-model` two-way automatically? I don't know much about Angular1. – Günter Zöchbauer Jan 14 '17 at 16:53
2

Yes it is by default in `Angular1.x` and you are welcome ! – micronyks Jan 14 '17 at 16:56
Thanks for this answer. and could you let me know how could we get values of [(ngModel)]="x.Name" at controller(component.ts file)? – sirius2013 Jun 07 '18 at 09:24
1

Add `(ngModelChange)="methodOnController($event)"` – Günter Zöchbauer Jun 07 '18 at 09:27

himanshu · Answer 2 · 2017-01-14T17:28:45.073

11

in you case sir if you are using *ngFor for loop then i don't think so you need index. why don't you just use x.Name. here is the modified code.

<table>
       <tr *ngFor="let x of names;let i = index;">
         <td>{{ i+ 1 }}</td>
         <td><input [(ngModel)]="x.Name">{{x.Name}}</td>
       </tr>
    </table>

or can you try this

<table>
           <tr *ngFor="let x of names;let i = index;">
             <td>{{ i+ 1 }}</td>
             <td><input [value]="x.Name" [(ngModel)]="x.Name">{{x.Name}}</td>
           </tr>
        </table>

edited Jan 14 '17 at 17:28

answered Jan 14 '17 at 17:12

himanshu

143
6

Thanks for this answer. and could you let me know how could we get values of [(ngModel)]="x.Name" at controller(component.ts file)? – sirius2013 Jun 07 '18 at 09:23

*ngFor how to bind each item in array to ngModel using index

2 Answers2

Linked