How can I bind a list of checkboxes in a form using Angular?

Question

I have a form that contains a list of checkboxes for the user to check and then when the user submit the form, it should submit the list of checkboxes as an array of objects. Instead, I'm getting nothing.

What I'm getting in the console: {fruits: Array[0]}

What I expected: {fruits: Array[1]} // The numbers of array depends on the checkbox checked

Here is a stackblitz for an example

Possible duplicate : https://stackoverflow.com/questions/40927167/angular-reactiveforms-producing-an-array-of-checkbox-values — ngShravil.py, Oct 11 '19 at 16:25
You might find this useful: https://netbasal.com/handling-multiple-checkboxes-in-angular-forms-57eb8e846d21 — Andrei Gătej, Oct 11 '19 at 17:12

score 0 · Answer 1 · answered Oct 12 '19 at 03:10

You have done all except form initialization

myForm: FormGroup = this.initModelForm();

Full code is: I am console logging the formArray value

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, FormBuilder } from '@angular/forms';

export interface Fruit {
  uid: string;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent   {
public checks = [
  {description: 'descr1', value: 'value1'},
  {description: "descr2", value: 'value2'},
  {description: "descr3", value: 'value3'}
];

myForm: FormGroup = this.initModelForm();

constructor(
  public _fb: FormBuilder
) { }

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

onCheckChange(event) {
  console.log(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++;
    });
  }
  console.log(formArray.value);
}
}

Eliseo · Answer 2 · 2019-10-12T13:50:28.360

It's an aproach like Netanel Basal (only change the submit function). The things goes more fluid if we think in a Form who value can be like e.g.

{
  "otherControls": "",
  "myChoices": [
    false,
    true,
    false
  ]
}

Well, we don't want this ugly data, but we can, in submit write some like

submit(myForm) {
    if (myForm.valid) {
      const value = { ...myForm.value };
      value.myChoices = this.checks
        .filter((x, index) => myForm.value.myChoices[index])
        .map(x => x.value);
      this.result = value;
    }
  }

And "result" will be,e.g.

{
  "otherControls": "",
  "myChoices": [
    "value2"
  ]
}

Well, its true that we are complex the "submit", but in another hand, our form becomes like

<form *ngIf="myForm" [formGroup]="myForm" (submit)="submit(myForm)">
  <div formArrayName="myChoices">
  <div *ngFor="let choice of myForm.get('myChoices').controls; let i=index" class="col-md-2">
    <label>
      <input type="checkbox" [formControlName]="i">
      {{checks[i].description}}
    </label>
  </div>
  </div>
  <button type="submit">submit</button>
</form>

NOT externals function, not fight agains remove at push,etc Well, the only is create the form like

initModelForm(): FormGroup {
    return this._fb.group({
      otherControls: [""],
      myChoices: new FormArray(this.checks.map(x => new FormControl(false)))
    });
  }

See stackblitz

How can I bind a list of checkboxes in a form using Angular?

2 Answers2

Linked