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);
}

Marcado de plantilla:

 <div class="col-xs-12">
     <button (click)="addField()" type="button">Add</button>
 </div>

 <div *ngFor="let field of SomeArray; let i = index;">
     <input [(ngModel)]="field.key" #modelField="ngModel" [name]=" 'SomeArray['+i+'].key' " type="text" class="form-control" required />
     <div [hidden]="modelField.pristine || !(modelField.errors && modelField.errors.required)" class="alert alert-danger">
        Required error
     </div>

    <button (click)="removeField(i)" class="btn btn-danger">Remove</button>
 </div>

Esto funciona hasta que el usuario elimine cualquier elemento deSomeArray. Si agrego algunos dos elementos inicialmente:

y elimine el que tiene 1 índice:

luego, después de agregar otro elemento, Angular lo trata como un elemento que tiene índice 0 y 1 (el nuevo elemento "ocupa" las dos entradas):

(el elemento con la tecla 0.1345 ... no se muestra)

Vale la pena señalar elementos deSomeArray son como se esperaba, pero el enlace de datos falla. ¿Cuál puede ser la razón de esto?

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

Finalmente descubrí que el comportamiento ocurre cuando los elementos de entrada están en<form> solo etiquetaMuestra de Plunker aquí (el cierre de la plantilla con la etiqueta del formulario es la razón de ese problema).

¿Alguna idea de este comportamiento?