使用ngFor与ngModel动态数据的错误行为

Question

我在应用程序的逻辑中有复杂的,可能是新手的bug,所以我会尝试提供全面的信息.

我有一个绑定到我的数据模型的注册表单.用户可以在注册期间添加电话号码字段并保存为阵列.

我的模特:

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

并表示这部分形式

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

我添加和删除手机的方法.我为调试目的添加了日志和增量索引:

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

从这一部分发生奇怪的事情.根据日志数据在我的模型中正确写入但在UI中最后一个元素替换输入字段中的所有内容.但是在移除其中一部手机之后,此时显示的手机似乎代表了UI的最后状态.

记录期间捕获的日志:

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

任何帮助表示赞赏和感谢.

Answer 1

添加[ngModelOptions]="{standalone: true}"到您的输入应该可以解决问题：

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

对于每个带有NgModel指令的输入，FormControl都将被创建并将其添加到FormGroup，但是当您添加时standalone: true，字段不会添加到FormGroup并且这个问题应该被修复。您还应该name从输入中删除属性，因为在使用模板驱动的表单时只需要其中之一。(name或standalone: true)