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

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：无法设置只有一个getter'的＃的属性值。

Answer 1

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

模板编辑。

trackByFn(index: number) {
          return index;
        }

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

{{1}}