binding data to angular checkbox

The reason for this, is that you are using checked to mark which checkboxes should be checked, they have no correlation to your form array, so if you do not touch the checkboxes, the formarray will correctly be empty.

I can come up with a couple options to solve this… also the following changes:

change function could be changed to this:

onCheckChange(event) {
  if (event.target.checked) {
    this.ssArray.push(this.fb.control(event.target.value));
  }
  else {
   this.ssArray.removeAt(this.ssArray.value.findIndex(x => x === event.target.value))
  }
}

Doesn’t matter how you do it, your way works as well 🙂 I also like using FormBuilder (here injected as fb).

I like to use a getter in this case:

get ssArray() {
  return this.updateSvcForm.get('sservices') as FormArray;
}

The options I can think of:

1. add a checked property to the objects in your array sservicesOptions
2. Keep your isSelected function, but add the chosen options to your formarray initially

---

I like option 1 best, so add a checked property to the objects:

servicesOptions = [
  { description: '1. Sweeping', value: 'sweeping', checked: false },
  { description: '2. Mopping', value: 'mopping', checked: false },
  { description: '3. Windows', value: 'windows', checked: false },
  { description: '4. Washing Clothes', value: 'washingclothes', checked: false },
];

Then when you build the form, change the checked status for those that should be preselected, and also add the values that should be checked to your form array:

constructor(private fb: FormBuilder) {
  this.updateSvcForm = this.fb.group({
    sservices: this.fb.array([]),
  });
  // change the checked status for the checkboxes that should be checked
  this.servicesOptions.map(x => 
    this.empDetails.services.indexOf(x) >= 0 ? x.checked = true : x.checked = false)
  // initially set the selected form controls to the formarray
  this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))
}

Then you can add [checked]="service.checked" in template.

DEMO

---

Option 2:

Keep your checked function like you have, just remember to add the prechosen values to your formarray. I don’t really like this option, since for example, we end up calling a function in template, which is really not recommended. But anyway, keep the code as the same as you have now, just add the intial values to the formarray:

this.updateSvcForm = this.fb.group({
  sservices: this.fb.array([]),
});
// add the intial values to the formarray:
this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))

DEMO

I added a console.log inside the function, to show how it is called. It’s okay for a demo like this, but if you have a big form, I would really caution for you to use this solution.

---

There would be a third option, to actually set all values to your form array, and then just toggle the boolean value of the checkbox, but that would require some refactoring of code, which I don’t know if you want. But there is that option too.