Angular 15 Reactive Forms Dynamic Checkbox List Tutorial Example

In this tutorial, we will get to know how to implement a dynamic checkbox list in Angular. We will explain step by step implementation of this topic.

Sometimes, we have to choose multiple items from an array. At that time, we use a checkbox. This item lists dynamically and the user can choose the required option by using the checkbox. In this tutorial, we will learn through an example the step-by-step implementation of dynamic checkbox lists by using reactive forms in the Angular app.

 

Angular Reactive Forms Dynamic Checkbox List Tutorial Example

We simply need to follow the given steps for implementing the dynamic checkbox in the Angular app:

Step 1 – Create the New Angular App

Step 2 – Add Code on App.Module.ts File

Step 3 – Add Code on View File

Step 5 – Add Code On Component ts File

Step 6 – Start the Angular App

 

Step 1 – Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new dynamic-checkbox-app

 

Step 2 – Adding Code on App.Module.ts File

The next step is to visit src/app directory and open the app.module.ts file. Then, add the below-given code into it: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule }   from '@angular/forms';
    
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 – Adding the Code on View File

In this step, we create the simple reactive form for selecting checkbox values. Then, we visit src/app/app.component.html and update the given code into it:

<div class="container">
  <h1>Angular Dynamic Checkboxes Example - jollytools.live</h1>
     
  <form [formGroup]="form" (ngSubmit)="submit()">
    <label formArrayName="orders" *ngFor="let order of ordersFormArray.controls; let i = index">
      <input type="checkbox" [formControlName]="i"> 
      {{webData[i].name}} 
    </label>
   
    <br/>
    <button class="btn btn-success">submit</button>
  </form>
</div>

Step 4 – Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we add the following code into component.ts file:

import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormArray,
  FormControl,
  ValidatorFn
} from '@angular/forms';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
    
  form: FormGroup;
  webData = [
    { id: 1, name: 'PHP' },
    { id: 2, name: 'Laravel' },
    { id: 3, name: 'Angular' },
    { id: 4, name: 'React' }
  ];
   
  get ordersFormArray() {
    return this.form.controls.orders as FormArray;
  }
   
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      orders: new FormArray([])
    });
   
    this.addCheckboxesToForm();
  }
   
  private addCheckboxesToForm() {
    this.webData.forEach(() => this.ordersFormArray.push(new FormControl(false)));
  }
   
  submit() {
    const selectedOrderIds = this.form.value.orders
      .map((checked, i) => checked ? this.webData[i].id : null)
      .filter(v => v !== null);
    console.log(selectedOrderIds);
  }
    
}

 

Step 6 – Starting the Angular App

Lastly, we reach the final step of implementation where we execute the following command on the terminal to start the angular app:

ng serve

 

Conclusion

Finally, we reach the end of this tutorial in which we have clearly explained how to create and implement dynamic checkboxes using the reactive form in the Angular tutorial. In this tutorial, we have tried to explain the topic in quite a simple manner. Hope that you will surely get benefit from this.