javascript - ngModel 无法正确检测数组更改

Question

组件型号:

private SomeArray = [{ key: "Initial" }];

用户可以动态添加/删除项目:

addField() {
    this.SomeArray.push({ key: Math.random().toString() });
}

removeField(index: number) {
    this.SomeArray.splice(index, 1);
}

模板标记:

 <div class="col-xs-12">
     <button (click)="addField()" type="button">Add</button>
 </div>

 <div *ngFor="let field of SomeArray; let i = index;">
     <input [(ngModel)]="field.key" #modelField="ngModel" [name]=" 'SomeArray['+i+'].key' " type="text" class="form-control" required />
     <div [hidden]="modelField.pristine || !(modelField.errors && modelField.errors.required)" class="alert alert-danger">
        Required error
     </div>

    <button (click)="removeField(i)" class="btn btn-danger">Remove</button>
 </div>

这一直有效，直到用户从 SomeArray 中删除任何项目.如果我最初添加一些两项:


并删除索引为 1 的那个:



然后在添加另一个项目后，Angular 将其视为项目同时具有 0 和 1 索引(新项目“占用”两个输入):



(不显示键为 0.1345... 的项目)

值得注意的是 SomeArray的项目符合预期，但数据绑定(bind)失败。这可能是什么原因？

更新 : 感谢@Stefan Svrkota 和@AJT_82 的评论，我知道这个问题可以通过添加 [ngModelOptions]="{standalone: true}" 来解决。到所需的输入。但是我无法停止思考我的事业中问题的原因，没有设置 standalone选项(每个名称属性都有唯一值，因此这里没有任何问题)。

最后我发现当输入元素进入 <form> 时会发生这种行为。仅标记 - Plunker sample here (用表单标签封闭模板是问题的原因)。

对这种行为有任何想法吗？

Answer 1

发生的原因是ngFor混合 name删除某些项目时的属性。

当您使用 ngModel里面 form每个 ngModel控件将被添加到表单控件集合中。

让我们看看如果我们添加了三个项目并单击 Remove 会发生什么第二

1) 步骤1 - SomeArray[1].key存在于集合中 controls

2) 第二步 - SomeArray[1].key已从 controls 中删除收藏



3) Step3 - Html 看起来像



4) Step4 我们正在添加一个新项目



所以formGroup返回现有项目。

我们如何解决它？

1) 不要将我们的控件包装在 form 中标签

2) 添加ngNoForm属性到形式

<form ngNoForm>

3) 使用

[ngModelOptions]="{standalone: true}

使用上述所有三种解决方案:

我们可以删除 [name]属性绑定(bind)

我们不能使用内置的表单组验证

4) 对 ngFor 使用 trackBy

模板.html

<div *ngFor="let field of SomeArray; let i = index; trackBy: trackByFn">

组件.ts

trackByFn(i: number) {
  return i;
}

Plunker Example

这样我们的内置表单将正常工作