Angular checkbox using various ways is demonstrated here. Reactive Forms is used here. ReactiveFormsModule and FormsModule should be declared in AppModule as we are using Reactive forms.
CheckBox Component
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html',
styleUrls: ['./reactive-form.component.scss']
})
export class ReactiveFormComponent implements OnInit {
reactiveFormGroup: FormGroup;
ngOnInit() {
this.reactiveFormGroup = new FormGroup({
angular: new FormControl(false),
nodejs: new FormControl(false)
});
}
get angular() {
return this.reactiveFormGroup.get('angular') as FormControl;
}
get nodejs() {
return this.reactiveFormGroup.get('nodejs') as FormControl;
}
}
Checkbox HTML
<div class="container">
<form [formGroup]="reactiveFormGroup" class="col-xs-3">
<b>Technology Stack</b>
<div class="row mt-3 col-12 col-md">
<input type="checkbox" formControlName="angular"
class="mr-3"><b>Angular</b>
</div>
<div class="row mt-3 col-12 col-md">
<input type="checkbox" formControlName="nodejs"
class="mr-3"><b>Node JS</b>
</div>
</form>
<div style="width: 200px;" class="mt-3">FormGroup Values:
{{ reactiveFormGroup.value | json }}</div>
</div>
If you see the above example, it uses checkbox FormControl separately, when checkbox control grows it will be difficult to use the above code. For each controls, we are using separate getter methods. ABove example just uses FormControl and FormGroup. In the below example, we will make use of FormArray to overcome the above issue.
check-box.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-check-box',
templateUrl: './check-box.component.html',
styleUrls: ['./check-box.component.scss']
})
export class CheckBoxComponent {
form: FormGroup;
selectedCheckBoxList = [];
techStackList: any = [
{ id: 1, name: 'Angular', code : 'ANG' },
{ id: 2, name: 'Node JS', code : 'NOD' },
{ id: 3, name: 'React', code : 'REA' },
{ id: 4, name: 'Vue', code : 'VUE' },
{ id: 5, name: 'jQuery', code : 'JQU' }
];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
technology: this.formBuilder.array([], [Validators.required])
})
}
controlOnChange(e) {
const technologies: FormArray = this.form.get('technology') as FormArray;
if (e.target.checked) {
technologies.push(new FormControl(e.target.value));
this.selectedCheckBoxList.push(e.target.value);
} else {
const index = technologies.controls.findIndex(technology => technology.value === e.target.value);
technologies.removeAt(index);
}
}
submit(){
console.log(this.form.value);
}
}
technology property is a formcontrol that is declared as an Array and can store array of checkbox values. In this way, you can dynamically add more checkboxes.
In this checkboxes are declared in techStackList. In real time, the values might come from service or hardcoded depending upon the business logic.
check-box.component.html
<div class="container">
<h1>Select your tech skill</h1>
<form [formGroup]="form" (ngSubmit)="submit()" novalidate>
<div class="form-group">
<label for="tehnology">Technology</label>
<div *ngFor="let tech of techStackList">
<label>
<input type="checkbox" [value]="tech.code" (change)="controlOnChange($event)" />
{{tech.name}}
</label>
</div>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
</form>
<div class="col-md-4">
<h4>No of Selected Technologies : {{selectedCheckBoxList.length}} </h4>
<ul>
<li *ngFor="let tech of selectedCheckBoxList">{{tech}}</li>
</ul>
</div>
</div>
We are using separate components in both the examples, So declare the selector app-reactive-form and app-check-box in AppComponent's Template.
On Running the Example, you will see the following screen in browser window,
To see the console log open the browser in Inspect (F12) mode. Change the tech.code to tech.name to see the actual techstacklist.
You might be also interested in Angular Radio button example