使用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} to yo你输入应该解决问题：

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 指令，<将创建code> 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屋！