0
343
Vistas*ngPara restablecer todos los valores de formulario al agregar un nuevo elemento de entrada
Tengo una aplicación Angular2 con un botón que puede agregar otro préstamo a mis préstamos. Mi *ngFor es bastante simple también:
<div *ngFor="let loan of myLoans"> <label>{{loan.name}}</label> <input type="text" name="loan.name" [(ngModel)]="loan.amount"> </div> myLoans es una matriz de objetos de préstamo con parámetros de name y amount . Mi botón también es muy simple.
<button id="addLoan" type="button" (click)="addLoan()">Legg til lån</button>La función añadirPréstamo():
addLoan(): void{ var newLoan = new Loan(); this.myLoans.push(newLoan); }Mi problema es que cuando agrego un nuevo préstamo en la lista, cualquier valor que tenía en el campo de entrada para mis otros préstamos vuelve a 0 o cualquier valor que establecí en el constructor para el objeto de préstamo.
Cargar la aplicación muestra esta imagen
ngModel funciona al escribir un número
Después de presionar el botón "Legg til lån", el valor de la primera entrada se restablece
ngModel sigue funcionando para la primera entrada si intento poner otro número
¿Alguien tiene una idea de lo que está pasando aquí?
3 Respuestas
Responde la pregunta0
AJT_82 está cerca del problema, ya que los nombres no únicos le están causando un problema, sin embargo, puede hacer una solución aún más simple, y una más en la línea de lo que probablemente deseaba, cambiando su plantilla html a esto
<div *ngFor="let loan of myLoans"> <label>{{loan.name}}</label> <input type="text" [name]="loan.name" [(ngModel)]="loan.amount"> </div>Observe el cambio de poner el nombre en [ ]. Esto garantizará que la plantilla mantenga un vínculo con el nombre y, siempre que el nombre de cada préstamo sea único, también lo será el identificador.
Actualización: si el nombre no es único, puede agregarle el índice para que sea único.
<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
Estoy 99% seguro de que está utilizando un formulario, sin tener atributos de name únicos, ya que ngModel funciona.
El atributo de nombre tiene que ser único para ser evaluado como campos separados. A Angular realmente no le importa el ngModel en los formularios, sino que mira el atributo de name en su lugar.
Tenga en cuenta que el atributo de nombre que ha establecido actualmente: name="loan.name" en realidad contiene solo la cadena literal de loan.name no el valor real de su modelo, por lo tanto, el nombre no es único.
Entonces, cuando está impulsando un nuevo loan , todos los demás préstamos obtienen el mismo valor que el valor recién impulsado, ya que todos los campos se evalúan como uno solo.
Esto se puede solucionar fácilmente agregando el índice en el atributo de nombre, por ejemplo:
<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 sugirió usar [name]=loan.name en lugar de name='loan.name' . Pero esto no funcionó para mí. Acabo de agregar un índice {{i}} con el nombre que se indica a continuación y funcionó perfectamente.
<div *ngFor="let loan of myLoans; let i=index"> <label>{{loan.name}}</label> <input type="text" name="loan.name{{i}}" [(ngModel)]="loan.amount"> </div>@AJT_82 sugiere la solución que funcionó para mí. ¡Gracias por!
¡Gracias @Cassiano, explicaste muy bien el motivo!