使用 ngFor 与 ngModel 动态数据错误行为 [英] Using ngFor with ngModel dynamic data wrong behaviour

问题描述

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

I have complex and probably rookie bug in logic of my application, so I'll try to give comprehensive amount of information.

我已将注册表单绑定到我的数据模型.用户可以在注册时添加电话号码字段并保存为数组.

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

我的模型:

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>

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

My methods for adding and removing phones. I added logs and incremental index for debug 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));
  }

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

And from this part strange things happen. According to logs data writes in my model properly but in UI last element replaces everything in input fields. But after removing one of the phones displayed phones for this moment seems like represent last state of UI.

我在录制过程中捕获的日志:

My logs captured 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 appreciated and thanks in advance.

推荐答案

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

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>

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

For every input with NgModel directive, FormControl will be created and it will be added to FormGroup, but when you add standalone: true, the fields won't be added to the FormGroup and this problem should be fixed. You should also remove name attribute from your input because only one of those is needed when using template driven forms. (name or standalone: true)

这篇关于使用 ngFor 与 ngModel 动态数据错误行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！