Angular 4 FormGroup removeControl() 不更新表单

Question

我试图弄清楚如何从反应式表单中删除一个元素。

这是一个小例子的plunker：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>

所以你需要做的是从小部件中删除 from 表单

 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>