0
340
Views*ngFor resetting all form values when adding new input element
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?
3 answers
Answer question0
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>
0
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>
0
@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!