How to handle Checkboxes in Angular Application

    May 11, 2020       by Pankaj Kumar
handle-checkboxes-angular.jpg

For an Angular developer, It is necessary to have the understanding to work with all the input types. The working functionality of checkbox is very different from other input types in Angular.

In this article, We will see how we can handle the list of checkboxes in our Angular application.

Let's Get Started

 

 
const languages = [
  {name:'C++', selected:false,id:2},
  {name:'Java', selected:false,id:3},
  {name:'PHP', selected:false,id:4},
  {name:'Ruby', selected:false,id:5},
  {name:'Python', selected:false,id:6},
]
 

 

Above we have a list of languages that we will show this list in the checkbox, And as per user check/uncheck data will be submitted. 

 

Create Reactive Form for a list of Checkboxes

 

 
import { Component, OnInit, Inject, Output } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
 
export class App {
 
languageList = [
  {name:'C++', selected:false,id:2},
  {name:'Java', selected:false,id:3},
  {name:'PHP', selected:false,id:4}, 
  {name:'Ruby', selected:false,id:5},
  {name:'Python', selected:false,id:6},
]
 
 
constructor(private fb: FormBuilder) {
// create the form
  this.form = this.fb.group({
    languages: this.bindLanguages(),
  });
}
 
get languages() {
  return this.addNewUserForm.get('languages') as FormArray;
};
 
bindLanguages() {
 
  const arr = this.languageList.map((item) => {
    return this.fb.control(item.selected);
  });
  return this.fb.array(arr);
}
 
 
}
 

 

  • We have created a form with a single input field for language selection. 
  • bindLanguage() is creating an array of FormControls with the check/uncheck on the base of our languageList Array. And passed the array finally to FormArray.

FormArray in the above code is responsible for creating multiple FormControls, So at the end it will be like below:

 

 
this.form = this.fb.group({
  languages: new FormArray([
    new FormControl(true),
    new FormControl(false),
    new FormControl(true),
    new FormControl(false),
    new FormControl(false),
  ])
});
 

 

Update in HTML

Now let's update the template part:

 

 
<form [formGroup]=”form” (submit)=”onFormSubmit(form.value)”>
<div *ngFor=”let language of languages.controls; let i=index”>
<input type=”checkbox” [formControl]=language/> {{languageList[i].name}}
</div>
<button type=”submit”>Submit</button>
</form>
 

 

In the above code, *ngFor is used to create multiple checkboxes as per the language control created while creating the form.

 

Get the selected Item after submit

Now the final task is to receive the data as per user check/uncheck over the form.

 

 
onFormSubmit():void{
  const f = Object.assign({}, value, {
    languages: value.languages.map((s, i) => {
      return {
        name: this.languageList[i].name,
        id: this.languageList[i].id,
        selected: s
      }
    })
  })
  let selectedLanguage = f.languages.filter(doc=>{ if(doc.selected==true){ return doc}})
  console.log(selectedLanguage);
}
 

 

With the above code, We can see the selected language.

 

Conclusion

In this article, We understand how to work with checkboxes in Angular Application. 

I hope it helped you to get the basic understanding of using the checkboxes in angular application.

If you are new to Node.js then find Angular Sample Projects to start the app for enterprise-level application.

Let me know your thoughts over email pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share it with your friends.

 

angular checkboxes

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS