Using ngFor with incorrect ngModel dynamic data behavior

Question

I have a complex and probably newlywed error in the logic of my application, so I will try to provide an exhaustive amount of information.

I have a registration form attached to my data model. Phone number fields can be added by the user during registration and saved as an array.

My model:

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

And the presentation of this part of the 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> 

My methods of adding and removing phones. I added logs and an incremental index for debugging purposes:

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

And strange things come from this part. According to the logs, the data is written correctly in my model, but in the last user interface, the last element replaces all the input fields. But after deleting one of the phones currently displayed, the phones seem to represent the last state of the user interface.

My recordings recorded during recording:

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

Any help is appreciated and thanks in advance.

Answer 1

Adding [ngModelOptions]="{standalone: true}" to your input should fix the problem:

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

For each entry with the NgModel directive, a NgModel will be created and it will be added to the FormGroup , but when you add standalone: true , the fields will not be added to the FormGroup , and this should be fixed. You must also remove the name attribute from your input, because only one of them is necessary when using forms controlled by templates. ( name or standalone: true )