Angular2 - 防止复选框被选中

Question

我有一个 table，每行包含一个复选框。在 table header 中，我有一个 Check All 复选框，用于切换所有 table 行框。

我正在尝试实现一些逻辑，如果复选框的数量将超过特定限制，则显示错误并且不要切换 table 行复选框或 checkall盒子本身。

存在允许选中 checkAll 框的问题，即使我正在返回 false。我的绑定有问题？

HTML:

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

分量：

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.
    }
}

虽然 table 行的 none 复选框被选中，并且错误显示正确，但我点击的框仍然被切换。

我以为 return false; 会阻止这种情况，但我想不会。是不是我的绑定有什么问题导致它仍然可以切换？

Answer 1

ngModelChange 当绑定到复选框的值发生变化时触发，停止切换操作已经晚了。

这里你应该绑定click事件。然后你可以使用 $event.preventDefault() 来阻止复选框被切换。

您可以在 $event.preventDefault() 之前添加一些逻辑来确定是否应防止复选框更改状态。

参见Plunker demo。

Answer 2

HTML

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

代码

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;
}

Answer 3

我遇到了类似的问题，但检查是否已达到限制，然后阻止了默认的 preventDefault() 并停止了 stopPropagation()

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

然后在ts文件中

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

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

      }

    }
  }

因此您可以根据需要为我的情况设置限制

Angular2 - 防止复选框被选中

Angular2 - Prevent Checkbox from being checked

javascript

typescript

angular2-ngmodel

angular