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

Question

我的应用程序逻辑中存在复杂且可能是新手错误，因此我将尝试提供全面的信息。

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

我的模特：

    library(geosphere)
     > mydf$distance <- with(mydf, distGeo(c(mydf$LONGITUDE,mydf$LATITUDE),c(mydf$LONGITUDE,mydf$LATITUDE)))
    Error in .pointsToMatrix(p1) : Wrong length for a vector, should be 2

表示这部分表格

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>

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

录制过程中捕获的日志：

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

任何帮助表示感谢并提前感谢。

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时，这些字段会赢得＆＃39}。 t被添加到FormGroup，这个问题应该修复。您还应该从输入中删除name属性，因为在使用模板驱动表单时只需要其中一个属性。 （name或standalone: true）