Question

我试图找出如何从被动形式中删除元素。

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

当我点击X按钮时，表单对象会更新，但表单UI仍然包含该项目。

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

Answer 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>

Answer 2

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

我们的软件有一个FormGroup，涵盖动态添加/删除的FormControls。在添加/删除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创建和生命周期的方式，因此这是必需的。希望这可以帮助处于类似情况的人，但在尝试此解决方案之前，请尝试接受答案的策略，因为这是一种更清洁的方式。

Angular 4 FormGroup removeControl（）不更新表单

2 个答案: