CODEWITHSUNDEEP
angularbindingangular-ngmodel
YounesM
YounesM

Reputation: 2317

ngFor and ngModel resseting input when pushing into array

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.

Here is what my code looks like

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;
  }
}

and the form :

      <div class="form-group">
          <div class="row" *ngFor="let line of lines; let ind=index;">
            <div class="col-lg-1">
              <i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"></i>
            </div>
            <div class="col-lg-3">
              <select class="form-control" name="type" [(ngModel)]="lines[ind].type">
                <option>XXXXXX1</option>
                <option>XXXXXX2</option>
                <option>XXXXXX3</option>
              </select>
            </div>
            <div class="col-lg-4">
              <input class="form-control" type="number" min="0" name="qteCommande" [(ngModel)]="lines[ind].qteComm">
            </div>
            <div class="col-lg-4">
              <input class="form-control" type="number" min="0" name="qteRejet" [(ngModel)]="lines[ind].qteRejet">
            </div>
          </div>
        </div>

When I add all the lines at once, the form works perfectly. Now when I try to fill a line then add another line, for some reason, the form resets the lines previously entered.

enter image description here

But when I check my array, it still has the entered values

enter image description here

Can someone explain what is going on here / what I am doing wrong ? Any help would be greatly appreciated.

EDIT : I tried, as suggested by @Ploppy to use trackBy and added an id to my lines. I also added this line to the form :

<p>{{line.id}} | {{line.type}} | {{line.qteComm}} | {{line.qteRejet}}</p>

And this is what's happening : enter image description here

The form resets but the values are correctly binded.

Upvotes: 4

Views: 3014

Answers (2)

YounesM
YounesM

Reputation: 2317

So I finally figured out the problem in my code. My inputs were inside a form, and adding a new line added an input with the same name(Which is not allowed in Agular 2). Replacing my name attributes by name=attribute-{{id}}solved the problem.

<div class="form-group">
      <div class="row" *ngFor="let line of lines; let ind=index;">
        <div class="col-lg-1">
          <i class="fa fa-2x fa-plus-square add-btn" (click)="addLine()" *ngIf="lines[lines.length-1] === line"></i>
        </div>
        <div class="col-lg-3">
          <select class="form-control" name="type-{{ind}}" [(ngModel)]="lines[ind].type">
            <option>XXXXXX1</option>
            <option>XXXXXX2</option>
            <option>XXXXXX3</option>
          </select>
        </div>
        <div class="col-lg-4">
          <input class="form-control" type="number" min="0" name="qteCommande-{{ind}}" [(ngModel)]="lines[ind].qteComm">
        </div>
        <div class="col-lg-4">
          <input class="form-control" type="number" min="0" name="qteRejet-{{ind}}" [(ngModel)]="lines[ind].qteRejet">
        </div>
      </div>
    </div>

Here is a Plunker that summaries everything : Plunker

Upvotes: 4

Ploppy
Ploppy

Reputation: 15363

The problem is that Angular recreates the DOM because it does not recognize the lines. In order to help him, you need to use the trackBy method of the *ngFor directive and identify the items by a unique property.

*ngFor="let line of lines; let ind=index; trackBy:trackByFn"

In your component:

trackByFn(index,item){
  return item.myCustomIndex; // myCustomIndex should be unique
}

By default the trackBy method return the index of the item from its array.

Upvotes: 3

Related Questions