Angular 11/12 Reactive Forms Dynamic Checkbox List Tutorial Example

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

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

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 list by using reactive forms in Angular 11/12 app.

Angular 11/12 Reactive Forms Dynamic Checkbox List Tutorial Example

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

 

Step 1 is to Create the New Angular App

Step 2 is to Add Code on App.Module.ts File

Step 3 is to Add Code on View File

Step 5 is to Add Code On Component ts File

Step 6 is to Start the Angular App

 

Now, let’s learn in detail

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 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 - Thecodemon.com</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 checkbox using the reative form in Angular 12 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. 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *