Question

我该如何处理这种情况？显示3个复选框，每个复选框都可以向逻辑添加/删除indicador，我怎么知道是否已选中？我应该创建两种方法（addIndicador＆amp; removeIndicador）？

额外：如果选中或未选中复选框，我如何显示/隐藏div？

<li *ngFor="let indicador of indicadores">
  <input type="checkbox" id="{{ indicador.id }}" (change) = "addIndicador(indicador.id)" />
   <label for="{{ indicador.id }}">{{ indicador.nombre }}</label>
</li>



addIndicador(indicador: number):void {
    let answers: FormArray = new FormArray([]); 
    let id = indicador;

    (<FormArray>this.customForm.controls['indicadores']).push(
        new FormGroup({
            id: new FormControl(id),
            answers: answers
        })
    )
}

Answer 1

我在评论中提供的链接：Angular 2 how to get the multiple checkbox value?接近重复，但由于我们正在处理formarray中的表单组，而不仅仅是表单控件，因此删除和添加会有所不同。

也许有一种更优雅的方式（？），但要记住一些正常的数组函数不适用于FormArray，因此我们最终做了一个简单的for循环来迭代{{1并找到FormArray所在的FormGroup的索引。然后我们删除带有该索引的indicadores.id。所以像这样：

Formgroup

在模板中，我们的函数addRemoveIndicador(indicador: number, isChecked):void { let answers: FormArray = new FormArray([]); let id = indicador; if(isChecked) { <FormArray>this.customForm.controls['indicadores'].push( new FormGroup({ id: new FormControl(id), answers: answers }) } else { for(let i = 0; i<this.customForm.controls['indicadores'].length; i++) { if(this.customForm.controls['indicadores'].controls[i].controls.id.value == indicador) { this.customForm.controls['indicadores'].removeAt(i) } } }带有复选框：

addRemoveIndicador

<强> PLUNKER

Angular 2 Reactive Forms复选框状态

1 个答案: