Angular ReactiveForms:生成一组复选框值? [英] Angular ReactiveForms: Producing an array of checkbox values?

问题描述

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

示例:

<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"/></表单>

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

真或假

我想让它产生什么:

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

解决方案

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

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

component.html

<标签><input type="checkbox" [value]="choice.value" (change)="onCheckChange($event)">{{choice.description}}

component.ts

//例如选择的数组公共检查:Array= [{描述:'descr1'，值:'value1'}，{描述:descr2"，值:'value2'}，{描述:descr3"，值:'value3'}];initModelForm(): FormGroup{返回 this._fb.group({其他控件:['']，//formArray，为空myChoices: new FormArray([]),}}onCheckChange(事件){const formArray: FormArray = this.myForm.get('myChoices') as FormArray;/* 选中 */如果(事件.目标.检查){//在arrayForm中添加一个新控件formArray.push(new FormControl(event.target.value));}/* 未选中 */别的{//找到未被选中的元素让我:数字= 0;formArray.controls.forEach((ctrl: FormControl) => {if(ctrl.value == event.target.value) {//从arrayForm中移除未选中的元素formArray.removeAt(i);返回;}我++;});}}

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

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

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

Given a list of checkboxes bound to the same formControlName, how can I produce an array of checkbox values bound to the formControl, rather than simply true/false?

Example:

<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 currently produces:

true or false

What I want it to produce:

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

解决方案

With the help of silentsod answer, I wrote a solution to get values instead of states in my formBuilder.

I use a method to add or remove values in the formArray. It may be a bad approch, but it works !

component.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++;
    });
  }
}

When I submit my form, for example my model looks like:

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

Only one thing is missing, a function to fill the formArray if your model already has checked values.

这篇关于Angular ReactiveForms:生成一组复选框值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！