*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

@Joo_Beck suggested to use [name]=loan.name instead of name='loan.name'. But this didn't worked for me. I just added an index {{i}} with the name as given below and it worked perfectly.

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

The solution worked for me is suggested by @AJT_82. Thanks for!

Thanks @Cassiano you explained the reason very well!

Answer 3

The value of the input becomes zero because you've declared the [(ngModel)] to be the iterator object of *ngFor. And when you push a blank Object to myLoans's array the ngModel changes the input to zero (default value for amount)

Example:

myLoans = [0, 1, 2, 3]

When you refresh the page the [(ngModel]) binds the last value of array to the input (3).

If you write 125 on the input,

Then you're also changing the last array's value

myLoans = [0, 1, 2, 125]

If you push a new element, Angular will refresh the input with the last array value

myLoans = [0, 1, 2, 125, 0]

Input.value now = 0

---

My Opinion: It's a bad pratice to use ngModel inside a *ngFor, there's another way to do the same task using (click) event and Angular Selector. Try this instead:

<input #loan ..>
<button (click)="addLoan(loan.value)">Add Loan</button>

Answer 4

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 5

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.