Używanie ngFor z dynamicznym błędem danych ngModel

Question

Mam złożoną i prawdopodobnie żółtodziobową wadę w logice mojej aplikacji, więc postaram się podać wyczerpującą ilość informacji.

Mam formularz rejestracyjny powiązany z moim modelem danych. Pola numerów telefonów mogą być dodawane przez użytkownika podczas rejestracji i zapisywane jako tablica.

Mój model:

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

i reprezentacji tej części formularza

 <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> 

Moi metod dodawania i usuwania komórkowych. Dodałem logi i przyrostowy indeks do celów debugowania:

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

I od tego momentu dzieją się dziwne rzeczy. Według logów dane zapisują się w moim modelu poprawnie, ale w interfejsie użytkownika ostatni element zamienia wszystko w polach wejściowych. Ale po usunięciu jeden z telefonów wyświetlanych na ten moment wygląda na ostatni stan interfejsu użytkownika.

Moje dzienniki złapanych podczas nagrywania:

"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"}]" 

Każda pomoc docenia i dzięki z góry.

Answer 1

Dodawanie [ngModelOptions]="{standalone: true}" do swojego wejścia powinno rozwiązać problem:

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

Dla każdego wejścia z dyrektywą NgModel, FormControl zostanie utworzony i będzie dodana do FormGroup, ale po dodaniu standalone: true, pola wygrał” t należy dodać do FormGroup i ten problem powinien zostać naprawiony. Powinieneś również usunąć atrybut name ze swojego wejścia, ponieważ tylko jeden z nich jest potrzebny podczas korzystania z formularzy opartych na szablonach. (name lub standalone: true)