1. ホーム
  2. javascript

[解決済み] Angular ReactiveForms。チェックボックスの値の配列を生成する?

2022-06-26 18:53:20

質問

チェックボックスのリストが、同じ 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', ...]

どのように解決するのですか?

silentsodさんの回答を参考に、formBuilderでstateの代わりにvalueを取得する方法を書きました。

私は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を埋める関数です。