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

Question

给定绑定到相同 formControlName 的复选框列表，如何生成绑定到 formControl 的复选框值数组，而不是简单地 true / false ？

例子：

<form [formGroup]="checkboxGroup">
    <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" />
    <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" />
    <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" />
</form>

checkboxGroup.controls['myValues'].value 当前产生：

true or false

我希望它产生什么：

['value-1', 'value-2', ...]

原文由 marked-down 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

我使用一种方法在 formArray 中添加或删除值。这可能是一个糟糕的方法，但它有效！

组件.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>

组件.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']

只缺少一件事，如果您的模型已经检查了值，则填充 formArray 的函数。

原文由 Guymage 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是使用 FormArray https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html 的好地方

首先，我们将使用 FormBuilder 或新建一个 FormArray 来构建我们的控件数组

表单生成器

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

新的FormArray

 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>

Here we’re iterating over our set of FormControls in our myValues FormArray and for each control we’re binding [formControl] to that control而不是 FormArray 控制和 <div>{{checkboxGroup.controls['myValues'].value}}</div> 产生 true,false,true 同时也使你的模板语法少一些手动。

你可以使用这个例子： http ://plnkr.co/edit/a9OdMAq2YIwQFo7gixbj?p=preview 来四处看看

原文由 silentsod 发布，翻译遵循 CC BY-SA 3.0 许可协议