CODEWITHSUNDEEP
angulartypescriptcheckbox
Jane
Jane

Reputation: 283

Angular 2 select or deselect checkboxes on condition

Please, note that I want to avoid jquery and use only Angular 2. Being that said, here is the PLUNK

I have some custom checkboxes, initially more than one can be selected. I am storing the selected items in an array like this:

    eventChkArr: any = [];
    updateChecked(value: any, event: any) {
        if (event.target.checked) {
          this.eventChkArr.push(value);
        }
        else if (!event.target.checked) {
          let index = this.eventChkArr.indexOf(value);
          this.eventChkArr.splice(index, 1);
        }
      }

When user selects more than one check box, a modal pops up (this modal is not popping up in the plunk for some reason) and ask if they want to select multiple checkboxes. Now, what I am trying to do is if user clicks on no button then only the last clicked button before modal popup will remain checked and on user's further clicking only one checkbox will be selected at a time. If they click on "yes" then multiple checkboxes can be selected. But, how do I achieve that, any help? TIA.

Upvotes: 3

Views: 9861

Answers (2)

YairTawil
YairTawil

Reputation: 4101

https://plnkr.co/edit/yU4P3zsQ3QaH9Vby8M3I?p=preview

You can save the checked value of each checkbox in 'eventTypeChkBox' Array:

 eventTypeChkBox: Array<{chkBoxImageUrl: string, id: string, val: string, checked: boolean}> = [
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg" ,id: "item-1", val: "1", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-2", val: "2", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-3", val: "3", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-4", val: "4", checked: false}
  ];

and now you can put the value of 'checked' in [(ngModel)] of each checkboxes:

<div *ngFor="let eventChk of eventTypeChkBox">
   <div class="col-md-3">
      <label class="btn-custom">
          <img src="{{eventChk.chkBoxImageUrl}}" alt="{{eventChk.val}}" class="img-check img-circle" [ngClass]="{'check': eventChk.isClassVisible } "
                       width="100" height="100">
                  <input  [(ngModel)]="eventChk.checked" (ngModelChange)="onModelChange(eventChk) type="checkbox" name="{{eventChk.id}}" id="{{eventChk.id}}" value="{{eventChk.val}}" class="hidden" autocomplete="off"
                         (change)="updateChecked(eventChk, $event); eventChk.isClassVisible = !eventChk.isClassVisible;">
                </label>
                <p>{{eventChk.val}}</p>
              </div>
            </div>

** if you want to use [(ngModel)] directive:

1.you should import 'FormsModule' in your 'AppModule':

import {FormsModule} from "@angular/forms";
@NgModule({
  imports: [ BrowserModule, FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

2. you need add different 'name' attribute for each 'checkbox' input, this is the reason i used name="{{eventChk.id}}" (you need unique name) inside html

when you have [(ngModel)] you can control what checked and what not.

if you want detect model changes you can use (ngModelChange)="onModelChange(eventChk)" on template and on class :

 onModelChange(eventTypeChkBoxObj) {
    if(eventTypeChkBoxObj.checked) {
      if(this.getCheckedCount() == 2){
        let result = confirm("Multiple checkboxes?");
        if(!result) eventTypeChkBoxObj.checked = false;
      }  
    }

  }

to checked items values you have no need 'eventChkArr', you can filter them:

getCheckedValues() {
   return this.eventTypeChkBox.filter(obj => obj.checked).map(obj => obj.val)
}

checked obj count:

 getCheckedCount():number{
    return this.getCheckedValues().length;
  }

for example:

 eventTypeChkBox = [{checked:true, val:1},{checked:true, val:2},{checked:false, val:3}]

getCheckedValues() will return:

["1","2"]

Good luck!

Upvotes: 5

Karbos 538
Karbos 538

Reputation: 3055

I suggest you this logic : 

<button *ngIf="eventChkArr.length > 1" (click)="popFisrtEvents()">Many choice ?</button>

and the method :

popFisrtEvents() {
    this.eventChkArr.splice(0, this.eventChkArr.lentgh -2);
}

So you don't block the user when clicking your checkbox...

Upvotes: 0

Related Questions