binding data to angular checkbox

Question

I managed to bind the data from this.empDetails.services correctly on the UI, checkboxes are checked correctly, and also listed all the checkboxes options.

Answer 1

you forget to set the new value of the form Array sservices :

onCheckChange(event) {
  const sservicesFormArray: FormArray =
    this.updateSvcForm.get('sservices') as FormArray;


  if (event.target.checked) {
    sservicesFormArray.push(new FormControl(event.target.value));
  }
  else {
    let i: number = 0;
    sservicesFormArray.controls.forEach((ctrl: FormControl) => {
      if (ctrl.value == event.target.value) {
        sservicesFormArray.removeAt(i);
        break;
      }
      i++;
    });
  }
  // set the new value of sservices form array
  this.updateSvcForm.setControl('sservices', sservicesFormArray);
}