Angular 4 - 在使用模板验证时删除 ngModel 值后，ngForm 值有时会保留

Question

我做了一个 plunker 可以很容易地重现问题。只需添加几个字段并快速删除它们。

我知道使用重新激活表单可能是解决此问题的方法，这就是我打算做的。它确实比使用模板验证给您带来更多好处。但是，我仍然很好奇如何解决这个问题。

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

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>

您不能传递表单值并删除它们。当我尝试这样做时，出现以下错误：错误类型错误：无法设置只有 getter'.

的 # 的 属性 值

Answer 1

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

模板编辑。

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

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

trackByFn(index: number) {
          return index;
        }