*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>

Answer 2

I'm 99% sure you are using a form, without having unique name attributes, since ngModel works.

The name attribute has to be unique to be evaluated as separate fields. Angular doesn't really care about the ngModel in forms, but looks at the name attribute instead.

Notice that the name attribute you had currently set: name="loan.name" actually contains just the string literal loan.name not the actual value of your model, therefore the name is not unique.

So when you are pushing a new loan, all other loans get the same value like the newly pushed value, as all fields are evaluated as one and the same.

This can easily be fixed by adding the index in the name attribute, for example:

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

Answer 3

I've tried your code and it works fine for me. I'm assuming it might be a compiler issue. Try updating your ng2 and typescript libraries to latest version. Here's an example partial tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "typeRoots": ["node_modules/@types/"],
    "types": [
      "node",
      "es6-shim"
    ]
  }
}

Also avoid using "var" for variable declaration. Use "let" to keep the variable scope. I think your problem might be because of using of var. If you're using old compiler, it might be messing up with your object.