How Can I Bind A List Of Checkboxes In A Form Using Angular?

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. Inste

Solution 1:

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';

exportinterfaceFruit {
  uid: string;
  name: string;
}

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

myForm: FormGroup = this.initModelForm();

constructor(public _fb: FormBuilder
) { }

initModelForm(): FormGroup{
  returnthis._fb.group({
    otherControls: [''],
    myChoices: newFormArray([])
  })
}

onCheckChange(event) {
  console.log(event);
  constformArray: FormArray = this.myForm.get('myChoices') asFormArray;

  /* Selected */if(event.target.checked){
    // Add a new control in the arrayForm
    formArray.push(newFormControl(event.target.value));
  }
  /* unselected */else{
    // find the unselected elementleti: 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);
}
}

Solution 2:

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)"><divformArrayName="myChoices"><div *ngFor="let choice of myForm.get('myChoices').controls; let i=index"class="col-md-2"><label><inputtype="checkbox" [formControlName]="i">
      {{checks[i].description}}
    </label></div></div><buttontype="submit">submit</button></form>

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

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

See stackblitz