0
402
Visualizações*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 Respostas
Responde à pergunta0
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
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>