CODEWITHSUNDEEP
javascriptangulartypescriptangular2-ngmodel
SBB
SBB

Reputation: 8970

Angular2 - Prevent Checkbox from being checked

I have a table that contains a checkbox per row. In the table header, I have a Check All checkbox that toggles all of the table row boxes.

I am trying to implement some logic to where if the count of checkboxes are going to exceed a specific limit, show an error and don't toggle the table row checkboxes OR the checkall box itself.

There is an issue that is allowing the checkAll box to get checked, even though I am returning false. Issue with my binding?

HTML: 

<input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)">

Component:

toggleAllEmployees(flag) {

    const temp = [];

    if (flag) {

        // If selecting all of these passes the max, throw an error
        if (this.importResults.length > this.maxSelection) {

            /* This is where I get to when I display the error message */
            alert('The number of employees you are trying to select (' + this.importResults.length + ') exceeds the max limit.');
            return false;

        } else {
            for (let i = 0; i < this.importResults.length; i++) {
                if (this.importResults[i].OnTempAssignment !== 'True') {
                    this.importResults[i].checked = true;
                    temp.push(this.importResults[i]);
                }
            }
            this.employeeSelection = temp;

            // Emit our changes
            this.selectedEmployees.emit(this.employeeSelection);

        }
    } else {
        //The else statement just un-checks all the boxes.
    }
}

Although none of the table row check boxes get checked, and the error is shown appropriately, the box I am clicking on still gets toggled.

I assumed that the return false; would have prevented that but I guess not. Is there something wrong with my binding that is allowing it to be toggled anyway?

Upvotes: 15

Views: 20610

Answers (3)

Bashir Saidi Wamula
Bashir Saidi Wamula

Reputation: 127

I achieved a similar problem but check if the limit has reached then prevented the default preventDefault() and stopped stopPropagation()

<input type="checkbox" class="message-checkbox mr-2" (click)="stopCheckingStates($event)"
                        (change)="stateChange(state, $event)" [checked]="isStateChecked(state.id)">

then in the ts file

    stopCheckingStates(event){
    this.stopCheckingCheckBox(event, 1);
  }

  stopCheckingCheckBox = (event, limit) => {
    if (selectArray.length > limit) {
      if (event.target.checked) {
        event.preventDefault();
        event.stopPropagation();
      } else {

      }

    }
  }

so you can set your limit as required for my case its was one

Upvotes: 0

Bharat chaudhari
Bharat chaudhari

Reputation: 534

HTML

 <input type="checkbox" [checked]="isChecked" (click)="onClick($event)">

Code

onClick(e){
  e.preventDefault();

 // In my case, I'm using the popup.
 // so once user confirms then hits api and update checkbox value.
 this.isChecked = true;
}

Upvotes: 9

Pengyy
Pengyy

Reputation: 38171

ngModelChange is fired when value binded to checkbox has changed, it's late for stop the toggle operation.

Here you should bind with click event. Then you can use $event.preventDefault() to stop checkbox from been toggled.

You can event add some logic before $event.preventDefault() to determin whether the checkbox should be prevent from changing status.

see Plunker demo.

Upvotes: 34

Related Questions