Angular 4 - ngForm 值在使用模板验证时删除 ngModel 值后有时会持续存在

Question

我已经创建了一个plunker，可以轻松地重新创建问题。只需添加几个字段并快速删除它们。

我知道使用重新激活表单可能是这里的方法，这就是我打算做的。与使用模板验证相比，它确实为您带来了更多收益。但是，我仍然对如何解决这个问题感到好奇。

我的模板上有一个数组，我可以添加许多记录，我只能慢慢删除它们以避免表单验证问题。如果我尝试使用此方法快速删除记录。

clickRemove(index: number) {
    this.testFields.splice(index, 1);
}

它会从 testFields 数组中删除我的记录，但有时它不会从我的 ngForm myForm.value 中删除它们。这将导致我的提交字段被禁用，因为它没有通过 !myForm.form.valid 检查。

<button type="submit" [disabled]="!myForm.form.valid || testFields.length == 0">Submit</button>

您不能传递表单值并删除它们。当我尝试这个时，我收到以下错误：ERROR TypeError: Cannot set property value of # which has only a getter'。

Answer 1

感谢@yurzui 提供的cmets。它真的帮助我理解并把它放在一起。我需要在我的 *ngFor 循环中添加一个 trackBy 函数来跟踪所有对象的变化。

模板编辑。

<tr *ngFor="let testField of testFields; trackBy: trackByFn; index as i;">

将此功能添加到我的组件中。

trackByFn(index: number) {
          return index;
        }