I was working on a project of multiple checkbox. There, I want the checkboxes to be checked from the start and the value to be in the form(I am using reactive form). The user can unselect the boxes according to their wish and the data will be stored accordingly. This is the stackblitz of the project. There I was able to make the checkbox checked from the beginning, but when I hit the submit button there is no data when I console-logged. I think this is some binding issue,but I couldn't figure out what is exactly the problem. Can someone help? Thanks in advance.

This is code:

<form [formGroup]="form" (ngSubmit)="submit()">
  <div >
    <label for="website">Website:</label>
    <div *ngFor="let web of websiteList">
      <label>
        <input
          type="checkbox"
          [value]="web.id"
          (change)="onCheckboxChange($event)"
          [checked]="web.isSelected"
        />
        {{ web.name }}
      </label>
    </div>
  </div>
  <button  type="submit">Submit</button>
</form>

  form: FormGroup;
  websiteList: any = [
    { id: 1, name: 'HDTuto.com', isSelected: true },

    { id: 2, name: 'HDTuto.com', isSelected: true },

    { id: 3, name: 'NiceSnippets.com', isSelected: true },
  ];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      website: this.fb.array([], [Validators.required]),
    });
  }

  ngOnInit() {}
  onCheckboxChange(e: any) {
    const website: FormArray = this.form.get('website') as FormArray;
    console.log('checking ->', e);

     if (e.target.checked) {
      website.push(new FormControl(e.target.value));
      console.log('website ->', website);
    } else {
      //console.log(e);
      const index = website.controls.findIndex((x) => {
        console.log('x.value ->', x.value);
        console.log('target.value ->', e.target.value);
        x.value === e.target.value;
      });

      website.removeAt(index);
    }
  }
  submit() {
    console.log(this.form.value);
  }

CodePudding user response：

https://stackblitz.com/edit/angular-ivy-qar4ph?file=src/app/app.component.ts Pay attention to changes in template:

1. Added formArrayName attribute to checkboxes wrapper and formControlName attribute to input element.
2. Removed change and checked attributes

In the component ts file:

1. Added initial form array values
2. Added mapping to submit method
3. Removed onCheckboxChange method