Estaba trabajando en un proyecto de casilla de verificación múltiple. Allí, quiero que las casillas de verificación se marquen desde el principio y que el valor esté en el formulario (estoy usando un formulario reactivo). El usuario puede deseleccionar las casillas según su deseo y los datos se almacenarán en consecuencia. Este es el stackblitz del proyecto. Allí pude marcar la casilla de verificación desde el principio, pero cuando presioné el botón Enviar no hay datos cuando inicié sesión en la consola. Creo que este es un problema vinculante, pero no pude averiguar cuál es exactamente el problema. ¿Alguien puede ayudar? Gracias por adelantado.

Este es el código:

 <form [formGroup]="form" (ngSubmit)="submit()"> <div class="form-group"> <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 class="btn btn-primary" 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); }