Dynamic checkboxes in Angular tutorial

app.component.final.html

<form [formGroup]="musicForm" (ngSubmit)="submit()">
  <label>
    <input type="checkbox" formControlName="selectAll">
    Select/Unselect all
  </label>
  <label formArrayName="musicPreferences" *ngFor="let genre of musicForm.controls['musicPreferences'].controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{musicPreferences[i].genre}}
  </label>

  <button>submit</button>
</form>

app.component.final.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  musicForm: FormGroup;
  musicPreferences = [
    { id: 1, genre: 'Pop' },
    { id: 2, genre: 'Rock' },
    { id: 3, genre: 'Techno' },
    { id: 4, genre: 'Hiphop' }
  ];

  constructor(private fb: FormBuilder) {
    // Create a FormControl for each available music preference, initialize them as unchecked, and put them in an array
    const formControls = this.musicPreferences.map(control => new FormControl(false));

    // Create a FormControl for the select/unselect all checkbox
    const selectAllControl = new FormControl(false);
  
    // Simply add the list of FormControls to the FormGroup as a FormArray, add the selectAllControl separetely
    this.musicForm = this.fb.group({
      musicPreferences: new FormArray(formControls),
      selectAll: selectAllControl
    });
  }

  ngOnInit() {
    this.onChanges();
  }

  onChanges(): void {
    // Subscribe to changes on the selectAll checkbox
    this.musicForm.get('selectAll').valueChanges.subscribe(bool => {
      this.musicForm
        .get('musicPreferences')
        .patchValue(Array(this.musicPreferences.length).fill(bool), { emitEvent: false });
    });

    // Subscribe to changes on the music preference checkboxes
    this.musicForm.get('musicPreferences').valueChanges.subscribe(val => {
      const allSelected = val.every(bool => bool);
      if (this.musicForm.get('selectAll').value !== allSelected) {
        this.musicForm.get('selectAll').patchValue(allSelected, { emitEvent: false });
      }
    });
  }

  submit() {
    // Filter out the unselected ids
    const selectedPreferences = this.musicForm.value.musicPreferences
      .map((checked, index) => checked ? this.musicPreferences[index].id : null)
      .filter(value => value !== null);
    // Do something with the result
  }
}

app.component.step-1.html

<form [formGroup]="musicForm" (ngSubmit)="submit()">
  <label formArrayName="musicPreferences" *ngFor="let genre of musicForm.controls.musicPreferences.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{musicPreferences[i].genre}}
  </label>

  <button>submit</button>
</form>

app.component.step-1.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  musicPreferences = [
    { id: 1, genre: 'Pop' },
    { id: 2, genre: 'Rock' },
    { id: 3, genre: 'Techno' },
    { id: 4, genre: 'Hiphop' }
  ];
}

app.component.step-2.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  musicForm: FormGroup;
  musicPreferences = [
    { id: 1, genre: 'Pop' },
    { id: 2, genre: 'Rock' },
    { id: 3, genre: 'Techno' },
    { id: 4, genre: 'Hiphop' }
  ];

  constructor(private fb: FormBuilder) {
    // Create a FormControl for each available music preference, initialize them as unchecked, and put them in an array
    const formControls = this.musicPreferences.map(control => new FormControl(false));
  
    // Simply add the list of FormControls to the FormGroup as a FormArray
    this.musicForm = this.fb.group({
      musicPreferences: new FormArray(formControls)
    });
  }

  submit() {
    // do something
  }
}

app.component.step-3.ts

submit() {
  // Filter out the unselected ids
  const selectedPreferences = this.musicForm.value.musicPreferences
    .map((checked, index) => checked ? this.musicPreferences[index].id : null)
    .filter(value => value !== null);
  // Do something with the result
  ...
}

app.component.step-4.ts

constructor(private fb: FormBuilder) {
  const formControls = this.musicPreferences.map(control => new FormControl(false));

  // Create a FormControl for the select/unselect all checkbox
  const selectAllControl = new FormControl(false);
  
  // Add the selectAllControl separetely
  this.musicForm = this.fb.group({
    musicPreferences: new FormArray(formControls),
    selectAll: selectAllControl
  });
}

// Import and implement OnInit from the '@angular/core' library, and implement the onChanges function
ngOnInit() {
  this.onChanges();
}

onChanges(): void {
  // Subscribe to changes on the selectAll checkbox
  this.musicForm.get('selectAll').valueChanges.subscribe(bool => {
    this.form
      .get('musicPreferences')
      .patchValue(Array(this.musicPreferences.length).fill(bool), { emitEvent: false });
  });

  // Subscribe to changes on the music preference checkboxes
  this.musicForm.get('musicPreferences').valueChanges.subscribe(val => {
    const allSelected = val.every(bool => bool);
    if (this.musicForm.get('selectAll').value !== allSelected) {
      this.musicForm.get('selectAll').patchValue(allSelected, { emitEvent: false });
    }
  });
}

I have spent days trying to figure out how to use reactive forms to do something similar to this- dynamic checkboxes. Thanks to this post I was finally able to figure out how they work and get mine implmented after days of trying ! Great post, well written and easy to understand. Thanks!

hi, how I can validate that?