Angular ReactiveForms：生成复选框值数组？

在silentsod answer的帮助下，我写了一个解决方案来获取值而不是我的formBuilder中的状态。

我使用一种方法在Array格式中添加或删除值。这可能是一个糟糕的approch，但它的工作原理！

组件.html

<div *ngFor="let choice of checks; let i=index" class="col-md-2">
  <label>
    <input type="checkbox" [value]="choice.value" (change)="onCheckChange($event)">
    {{choice.description}}
  </label>
</div>

component.ts

// For example, an array of choices
public checks: Array<ChoiceClass> = [
  {description: 'descr1', value: 'value1'},
  {description: "descr2", value: 'value2'},
  {description: "descr3", value: 'value3'}
];

initModelForm(): FormGroup{
  return this._fb.group({
    otherControls: [''],
    // The formArray, empty 
    myChoices: new FormArray([]),
  }
}

onCheckChange(event) {
  const formArray: FormArray = this.myForm.get('myChoices') as FormArray;

  /* Selected */
  if(event.target.checked){
    // Add a new control in the arrayForm
    formArray.push(new FormControl(event.target.value));
  }
  /* unselected */
  else{
    // find the unselected element
    let i: number = 0;

    formArray.controls.forEach((ctrl: FormControl) => {
      if(ctrl.value == event.target.value) {
        // Remove the unselected element from the arrayForm
        formArray.removeAt(i);
        return;
      }

      i++;
    });
  }
}

例如，当我提交表单时，我的模型如下所示：

  otherControls : "foo",
  myChoices : ['value1', 'value2']

只缺少一件事，即如果您的模型已经检查了值，则用于填充表单Array的函数。

这是使用 https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.htmlFormArray

首先，我们将使用 a 或 new up 建立控件数组FormBuilderFormArray

表单生成器

this.checkboxGroup = _fb.group({
  myValues: _fb.array([true, false, true])
});

新形式阵列

let checkboxArray = new FormArray([
  new FormControl(true),
  new FormControl(false),
  new FormControl(true)]);

this.checkboxGroup = _fb.group({
  myValues: checkboxArray
});

操作非常简单，但随后我们将更改模板，让模板引擎处理我们如何绑定到控件：

模板.html

<form [formGroup]="checkboxGroup">
    <input *ngFor="let control of checkboxGroup.controls['myValues'].controls"
    type="checkbox" id="checkbox-1" value="value-1" [formControl]="control" />     
  </form>

在这里，我们将循环访问我们的集合，对于每个控件，我们将绑定到该控件而不是控件并生成，同时还使模板语法的手动性降低一些。FormControlsmyValuesFormArray[formControl]FormArray<div>{{checkboxGroup.controls['myValues'].value}}</div>true,false,true

你可以用这个例子：http://plnkr.co/edit/a9OdMAq2YIwQFo7gixbj?p=preview 戳来戳去