Angular 2 - 2 Way Binding with NgModel in NgFor

Question

In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.

Plunkr

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;">
      <input [(ngModel)]="item" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  constructor() {}
  ngOnInit() {
  }
}

You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate? — Ben Richards
– Ben Richards, Commented Oct 29, 2016 at 0:22
It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly. — Ka Tech
– Ka Tech, Commented Oct 29, 2016 at 0:58

starball · Accepted Answer · 2022-12-24 02:21:31Z

122

After digging around I need to use trackBy on ngFor. Updated plnkr and code below.

Working Plnkr

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="toDos[index]" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  constructor() {}
  ngOnInit() {
  }
  trackByIndex(index: number, obj: any): any {
    return index;
  }
}

edited Dec 24, 2022 at 2:21

starball♦

59.6k53 gold badges315 silver badges1k bronze badges

answered Oct 29, 2016 at 3:16

Ka Tech

9,50715 gold badges62 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Lars Over a year ago

Actually the trackBy does not matter in your code! What matters is [(ngModel)]="toDos[index]" instead of [(ngModel)]="item"

Reed Over a year ago

@Lars without the trackBy the input loses focus and seems to hang in my experience.

MMM Over a year ago

Without the trackBy ngFor re-creates the DOM every time you change a string in your array, so this is totally necessary.

Ambroise Rabier Over a year ago

@Lars trackBy:trackByIndex; is needed otherwise you lose focus on the input after first keypress.

Ambroise Rabier Over a year ago

In case you have your <input> inside a <form>, angular force you to put a name on the input, in that case when modifying the string array it will display 3 time "Todo3" but no erro will be throw and everything else will be working. You can replace the name by [ngModelOptions]="{standalone: true}" so that you get all 3 differents strings on the inputs.

|

Lasitha Yapa · Accepted Answer · 2017-11-30 15:59:06Z

69

What you have done is not working because of two reasons.

You have to use toDos[index] instead of item with ngModel (Read for more info)
Each input has to have a unique name

Here's the working solution for your problem.

<div>
<div *ngFor="let item of toDos;let index = index;">
  <input name=a{{index}} [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
  <label>{{item}}</label>
</div>

edited Nov 30, 2017 at 15:59

answered Nov 30, 2017 at 7:17

Lasitha Yapa

4,6498 gold badges42 silver badges62 bronze badges

4 Comments

Brian Bauman Over a year ago

I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!

Lasitha Yapa Over a year ago

Glad I could help

Kavinda Jayakody Over a year ago

"Each input has to have a unique name" - This saved me. Thanks man

Tiago Martinho Over a year ago

"Each input has to have a unique name" fixed it for me. My input values were dissappearing after a submission but now they stay there because each input has a different name. Thanks alot!

Simone Nigro · Accepted Answer · 2019-01-14 21:31:38Z

0

Try this

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;">
  <input [(ngModel)]="item.text" placeholder="item.text">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
  <label>{{item.text}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
   })
export class AppComponent { 
  toDos: any[] =[{text:"Todo1"},{text:"Todo2"},{text:"Todo3"}];
  constructor() {}
  ngOnInit() {
  }
}

edited Jan 14, 2019 at 21:31

Simone Nigro

4,9575 gold badges47 silver badges81 bronze badges

answered Dec 30, 2018 at 15:27

Vivek

1271 silver badge4 bronze badges

2 Comments

Suyash Gulati Over a year ago

Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.

Mike Over a year ago

Adding a key to the array shows that any object can be in the array and it can be referenced by this method, it helpful for more and deeper understanding to show that; Although that here the index is not used as showed by Lasitha Yapa below

Lorka · Accepted Answer · 2021-04-07 08:39:24Z

0

You have to add a name attribute to the ngModel with name + index to make it unique.

<mat-form-field
  #fileNameRef
  appearance="fill"
  color="primary"
  floatLabel="auto"
>
  <input
    matInput
    #fileNameCtrl="ngModel"
    name="originalName{{ index }}"
    [(ngModel)]="file.originalName"
    type="text"
    autocomplete="off"
    autocapitalize="off"
    readonly
  /> 
</mat-form-field>

edited Apr 7, 2021 at 8:39

answered Apr 5, 2021 at 11:25

Lorka

791 silver badge3 bronze badges

Collectives™ on Stack Overflow

Angular 2 - 2 Way Binding with NgModel in NgFor

4 Answers 4

8 Comments

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related