title: ngFor and ngModel resseting input when pushing into array
body: <p>I'm trying to create a form where you can add multiple lines before sending it. For that I'm using storing data in an array of Lines and use ngFor and ngModel to bind / retrieve data into my form.</p>
  
  <p>Here is what my code looks like</p>
  
  <pre><code>export class MyComponent implements OnInit {
    lines : Line[] = [];
  
    constructor() { }
  
    ngOnInit() {
      this.lines.push(new Line("XXXXXX1",0,0));
    }
  
    addLine(){
      let line = (new Line("XXXXXX1",0,0));
      this.lines.push(line);
    }
  
    save(){
      console.log(this.lines);
    }
  }
  
  class Line {
    type: string;
    qteRejet : number;
    qteComm : number;
  
    constructor(type: string = "XXXX1", qteRej: number = 0, qteComm : number = 0){
      this.type = type;
      this.qteRejet = qteRej;
      this.qteComm = qteComm;
    }
  }
  </code></pre>
  
  <p>and the form :</p>
  
  <pre><code>      &lt;div class="form-group"&gt;
            &lt;div class="row" *ngFor="let line of lines; let ind=index;"&gt;
              &lt;div class="col-lg-1"&gt;
                &lt;i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3"&gt;
                &lt;select class="form-control" name="type" [(ngModel)]="lines[ind].type"&gt;
                  &lt;option&gt;XXXXXX1&lt;/option&gt;
                  &lt;option&gt;XXXXXX2&lt;/option&gt;
                  &lt;option&gt;XXXXXX3&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                &lt;input class="form-control" type="number" min="0" name="qteCommande" [(ngModel)]="lines[ind].qteComm"&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                &lt;input class="form-control" type="number" min="0" name="qteRejet" [(ngModel)]="lines[ind].qteRejet"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>When I add all the lines at once, the form works perfectly. Now when I try to <strong>fill a line then add another line</strong>, for some reason, the form resets the lines previously entered.</p>
  
  <p><a href="https://i.stack.imgur.com/opBPL.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/opBPL.gif" alt="enter image description here"></a></p>
  
  <p>But when I check my array, it still has the entered values</p>
  
  <p><a href="https://i.stack.imgur.com/wAsG2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wAsG2.png" alt="enter image description here"></a></p>
  
  <p>Can someone explain what is going on here / what I am doing wrong ? Any help would be greatly appreciated.</p>
  
  <p>EDIT : I tried, as suggested by <strong>@Ploppy</strong> to use trackBy and added an id to my lines. I also added this line to the form :</p>
  
  <pre><code>&lt;p&gt;{{line.id}} | {{line.type}} | {{line.qteComm}} | {{line.qteRejet}}&lt;/p&gt;
  </code></pre>
  
  <p>And this is what's happening :
  <a href="https://i.stack.imgur.com/HNncW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HNncW.gif" alt="enter image description here"></a></p>
  
  <p>The form resets but the values are correctly binded.</p>