Angular 4 FormGroup removeControl() 不更新表单答案

【问题标题】：Angular 4 FormGroup removeControl() does not update the formAngular 4 FormGroup removeControl() 不更新表单
【发布时间】：2018-02-08 20:32:09
【问题描述】：

我正在尝试弄清楚如何从响应式表单中删除元素。

这是一个小例子：http://plnkr.co/edit/HyhMDoMtek02CyKpZ7Wt?p=preview

当我点击X 按钮时，表单对象已更新，但表单 UI 上仍有项目。

如何让表单在删除时自行更新？

【问题讨论】：

标签： angular typescript angular-reactive-forms

【解决方案1】：

在模板中你正在迭代小部件

 <div *ngFor='let item of widget.items'>
            <input type='text' [formControlName]='item.id'>
            <button type='button' (click)='deleteItem(item.id)'>X</button>
          </div>

所以你需要从窗体中删除小部件

 deleteItem(id: number){
     var elem = this.widget.items.find((i)=>i.id == id);
     this.widget.items.splice(this.widget.items.indexOf(elem), 1)
    (<FormGroup>this.form).removeControl(id.toString());
  }

其他选项将代替通过对象迭代通过控件对象进行迭代

<div *ngFor='let control of form.controls'>
   <input type='text' [formControl]='control'>
   <button type='button' (click)='deleteItem(item.id)'>X</button>
</div>

【讨论】：

第二个选项不起作用，但我希望你知道如何解决它:)

【解决方案2】：

我的公司在使用 FormGroups 在我们基于 Angular 的网站上动态添加和删除控件时遇到了这个问题。

我们的软件有一个 FormGroup，它涵盖了动态添加/删除的 FormControl。当您添加/删除 widget.items 条目时，控件会从显示的页面中添加/删除。

任何时候你想添加一个小部件，你首先在 widget.items 列表中添加一个新条目，然后在 FormGroup 中添加一个新的表单控件（使用 FormGroup.addControl）。新控件按预期添加到控件列表的底部，并且与该控件关联的任何验证器也将添加到其中。所有现有控件都维护其数据和验证器。

另一方面，如果您从 widget.items 列表中除底部之外的任何位置删除控件，Angular 不会删除页面上的相应控件，而是删除底部控件。这将导致现在删除的小部件项处或下方的所有控件具有不正确的数据，而现在删除的条目处的项仍包含旧信息。

要解决此问题并让 Angular 知道它需要正确更新整个表单组，您可以执行以下操作（假设 widget.items = [widget1, widget2, widget3, widget4]）：

将 widget.items 设置为 []

widget.items = []

检测更改

this.changeDetectorRef.detectChanges()

将 widget.items 重置为修改后的列表（也就是没有要删除的项目的列表）

widget.items = [widget1，widget3，widget 4]

这将导致页面列表被刷新，并包含有效的数据和有效的验证器。

对于我们的软件，这是必需的，因为它处理自定义控件以及连接 FormGroup/FormControl 创建和生命周期的方式。希望这会对处于类似情况的人有所帮助，但在尝试此解决方案之前，请尝试接受答案中的策略，因为它是一种更清洁的方法。

【讨论】：