*ngFor resetting all form values when adding new input element

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>

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.

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>