ngModel no puede detectar cambios en la matriz correctamente

El modelo de componente:

private SomeArray = [{ key: "Initial" }]; 

El usuario puede agregar / eliminar elementos dinámicamente:

 addField() { this.SomeArray.push({ key: Math.random().toString() }); } removeField(index: number) { this.SomeArray.splice(index, 1); } 

Marca de plantilla:

  
Required error

Esto funciona hasta que el usuario elimine cualquier elemento de SomeArray . Si agrego algunos dos elementos inicialmente: introduzca la descripción de la imagen aquí

y quitar el que tiene 1 índice:

introduzca la descripción de la imagen aquí

luego, después de agregar otro elemento, el tratamiento Angular como elemento tiene 0 y 1 índice (el nuevo elemento “ocupa” las dos entradas):

introduzca la descripción de la imagen aquí

(el elemento con la clave 0.1345 … no se muestra)

Vale la pena señalar que los elementos de SomeArray son los esperados, pero el enlace de datos falla. ¿Cuál puede ser la razón de ello?

Actualización : Gracias a los comentarios de @Stefan Svrkota y @ AJT_82, se sabe que el problema se puede resolver agregando [ngModelOptions]="{standalone: true}" a la entrada necesaria. Pero no podía dejar de pensar en el motivo del problema en mi causa, sin establecer la opción standalone (hay un valor único para cada atributo de nombre, por lo que no hay nada incorrecto aquí).

Finalmente, descubrí que el comportamiento se produce cuando los elementos de entrada están solo en la etiqueta – Ejemplo de muestra aquí (el motivo de este problema es la inclusión de una plantilla con una etiqueta de formulario).

¿Alguna idea de este comportamiento?

One Solution collect form web for “ngModel no puede detectar cambios en la matriz correctamente”

La razón por la que sucede es ngFor mezcla las propiedades de name cuando borra algún elemento.

Cuando use ngModel en el form cada control ngModel se agregará a la colección de controles de formulario.

Veamos qué sucede si hemos agregado tres elementos y hemos hecho clic en Remove el segundo

1) SomeArray[1].keySomeArray[1].key existe en los controls colección introduzca la descripción de la imagen aquí

2) Paso 2 – SomeArray[1].key se ha eliminado de la colección de controls

introduzca la descripción de la imagen aquí

3) Paso 3 – Html parece

introduzca la descripción de la imagen aquí

4) Paso 4 Estamos agregando un nuevo artículo

introduzca la descripción de la imagen aquí

Así que formGroup devuelve el artículo existente.

¿Cómo podemos resolverlo?

1) No envuelva nuestros controles en form etiqueta

2) Agregue el atributo ngNoForm a la forma

 

3) Utilizar

 [ngModelOptions]="{standalone: true} 

Con las tres soluciones anteriores:

  • Podemos eliminar el enlace de propiedad [name]

  • No podemos usar la validación de grupo de formularios incorporada

4) Usa trackBy para ngFor

template.html

 

componente.ts

 trackByFn(i: number) { return i; } 

Ejemplo de Plunker

De esta manera nuestro formulario incorporado funcionará correctamente.

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.