Verwenden von ngFor mit ngModel dynamische Daten falsches Verhalten

Question

Ich habe komplexe und wahrscheinlich Anfänger Fehler in der Logik meiner Anwendung, so werde ich versuchen, eine umfassende Menge an Informationen zu geben.

Ich habe ein Registrierungsformular an mein Datenmodell gebunden. Telefonnummernfelder können vom Benutzer während der Registrierung hinzugefügt und als Array gespeichert werden.

Mein Modell:

export class RegistrationFormModel { 
    // 
    // 
    Phones: Array<{Phone: string;}>; 
    // 
    // 
} 

und Darstellung dieses Teils der Form

 <ion-item *ngFor="let Phone of regModel.Phones; let i = index"> 

     <ion-label floating>Phone number*</ion-label> 
     <ion-input type="tel" required [(ngModel)]="regModel.Phones[i].Phone" name="Phone" #Phone="ngModel" 
        pattern="\d{10}"></ion-input> 
     <ion-icon *ngIf="i==0" name="ios-add-circle-outline" item-right no-padding 
        (click)="addPhone()"></ion-icon> 
     <ion-icon *ngIf="i!=0" name="ios-remove-circle-outline" item-right no-padding 
        (click)="removePhone(i)"></ion-icon> 

    </ion-item> 

Meine Methoden zum Hinzufügen und Entfernen von Telefonen. Ich fügte hinzu, Protokolle und inkrementellen Index für Debug-Zwecke:

debugIndex = 0; 
\\ 
\\ 
    addPhone() { 
    console.log('phones before add: ' + JSON.stringify(this.regModel.Phones)); 
    this.regModel.Phones.splice((this.regModel.Phones.length), 0, {Phone: '' + this.debugIndex++}); 
    console.log('phones after add: ' + JSON.stringify(this.regModel.Phones)); 
    } 

    removePhone(i: number) { 
    console.log('phones before delete: ' + JSON.stringify(this.regModel.Phones)); 
    this.regModel.Phones.splice(i, 1); 
    console.log('phones after delete: ' + JSON.stringify(this.regModel.Phones)); 
    } 

Und aus diesem Teil seltsame Dinge passieren. Laut protokolliert Daten schreibt in meinem Modell richtig, aber in UI letzten Element ersetzt alles in Eingabefelder. Aber nach dem Entfernen eines der Telefone angezeigt Telefone für diesen Moment scheint wie letzten Zustand der Benutzeroberfläche darstellen.

Meine Protokolle während der Aufnahme erfasst:

"phones before add: [{"Phone":"123456789"}]", 
    "phones after add: [{"Phone":"123456789"},{"Phone":"0"}]", 
    "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
    "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
    "phones before delete: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
    "phones after delete: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
    "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
    "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"2"}]", 
    "phones before add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"}]", 
    "phones after add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"},{"Phone":"3"}]", 
    "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"}]", 
    "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]", 
    "phones before delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]" 
    "phones after delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"4"}]", 
    "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"}]", 
    "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"},{"Phone":"5"}]" 

Jede Hilfe im Voraus zu schätzen und bedanken.

Answer 1

[ngModelOptions]="{standalone: true}" auf Ihre Eingabe Hinzufügen sollte das Problem beheben:

<ion-input type="tel" required [(ngModel)]="regModel.Phones[i].Phone" 
[ngModelOptions]="{standalone: true} #Phone="ngModel" pattern="\d{10}"> 
</ion-input> 

Für jede Eingabe mit NgModel Richtlinie wird FormControl erstellt werden, und es wird zu FormGroup hinzugefügt werden, aber wenn man standalone: true hinzufügen, die Felder gewonnen‘ t hinzugefügt werden zu FormGroup und dieses Problem sollte behoben werden. Sie sollten auch das Attribut name aus Ihrer Eingabe entfernen, da nur eines davon erforderlich ist, wenn Sie Vorlagenvorlagen verwenden. (name oder standalone: true)