Angular mat-checkbox

Question

If there are 6 check-boxes in a form then how to limit the user to check only 3 check-boxes in angular without using jQuery or Java Script

Piyush Pansuriya · Answer

You can check the count when checkbox checked. input type = "checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked)" /> inside the class checkcnt: number =0; checkValue(event: any){ if (checkcnt >= 3){ !isChecked; } else { checkcnt++; } }

archana devi · Answer

Hi @Praneeth Salukooti I have edited my answer. Try this TYPESCRIPT checkbox: boolean ; checkbox1: boolean ; checkbox2: boolean ; checkbox3: boolean ; constructor() { //this.checkbox = false; } count=0; onCheckboxChange() { if ( this .count >=3) { setTimeout(()=>{ alert( "u can check only 3 boxes" ) this .checkbox = false ; this .checkbox1 = false ; this .checkbox2 = false ; this .checkbox3 = false ; }) this .count= this .count-1; } else { this .count++; } } HTML label > input type = 'checkbox' [(ngModel)]='checkbox' (ngModelChange)='onCheckboxChange()' > java input type = 'checkbox' [(ngModel)]='checkbox1' (ngModelChange)='onCheckboxChange()' > ionic input type = 'checkbox' [(ngModel)]='checkbox2' (ngModelChange)='onCheckboxChange()' > angular input type = 'checkbox' [(ngModel)]='checkbox3' (ngModelChange)='onCheckboxChange()' > react label >

Praneeth Salukooti · Answer

@Archana Devi , your solution working , but if we click the ok button alert it is checking the 4 th check box also

archana devi · Answer

Hi, Html Code CHOOSE YOUR PREFERENCE(max 3) br > input type = "checkbox" [(ngModel)]="checkbox1" (change)="check(checkbox1)" name = "ar" value = "java" /> java input type = "checkbox" [(ngModel)]="checkbox2" (change)="check(checkbox2)" name = "ionic" /> ionic input type = "checkbox" [(ngModel)]="checkbox3" (change)="check(checkbox3)" name = "angular" /> angular input type = "checkbox" [(ngModel)]="checkbox4" (change)="check(checkbox4)" name = "react" /> react form > Typescript import { Component } from '@angular/core' ; @Component({ selector: 'my-app' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { constructor(){ } count: number =0; isChecked= false ; check(event: any){ if ( this .count >= 3){ ! this .isChecked; alert( "only 3 checks are allowed" ); } else { this .count++; } } } Hope it is helpful