Angular 4 FormGroup removeControl() 不更新表单

Question

我正在尝试找出如何从响应式(Reactive)表单中删除元素。

这是一个小例子: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>