*ngFor resetting all form values when adding new input element

Question

I have an Angular2 app with a button that can add another loan to my loans. My *ngFor is pretty simple also:

    <div *ngFor="let loan of myLoans">
      <label>{{loan.name}}</label>
      <input type="text" name="loan.name" [(ngModel)]="loan.amount">
    </div>

myLoans is an array of Loan objects with name and amount parameters. My button is also very simple.

<button id="addLoan" type="button" (click)="addLoan()">Legg til lån</button>

The addLoan() function:

addLoan(): void{
    var newLoan = new Loan();
    this.myLoans.push(newLoan);
}

My problem is that when I add a new loan in the list, whatever value I had in the input field for my other loans goes back to 0 or whatever value I set in the constructor for the loan object.

Loading the app shows this picture

ngModel is working when typing in a number

After pressing the "Legg til lån" button, the value of the first input is reset

ngModel is still working for the first input if I try putting in another number

Anyone have an idea what is happening here?

Answer 1

AJT_82 is close to the problem, in that the non-unique names are causing you a problem, however you can do an even simpler fix, and one more along the lines of what you probably wanted, by changing your template html to this

<div *ngFor="let loan of myLoans">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name" [(ngModel)]="loan.amount">
</div>

Notice the change of putting name in [ ]. This will ensure the template maintains a link to the name, and so long as the name of each loan is unique, so will the identifier.

Update: If name is not unique, you can add the index to it to make it unique like so.

<div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name + '_' + i" [(ngModel)]="loan.amount">
</div>