条件复选框上的 Toastr 消息单击角度

Question

简介：

我有一个表，其中一列仅包含 复选框 作为值。我有一个名为 validate 的按钮。我在表格上方有一个 value。我分配的 value 是 4。如果我启用的复选框数量多于上面给出的数量，我需要显示一条 toastr 消息.

我的问题：

例如如果上面的数字是4，我最多只能勾选4个复选框。如果选中了超过 4 个复选框。我需要在单击验证按钮时显示 toastr 错误消息。

我尝试过的（可选阅读）：

Html 复选框和验证按钮：

<td>
    <input  type="checkbox" id="vehicle2" name="vehicle2"
      (change)="addCheckValue(i,list.isTicked)"
      [checked]="list.isTicked"
      [disabled]="list.isDisabled">
    </td>
   <button type="button" class="btn btn-outline-success"
   (click)="error()"  ><span class="fa fa-plus"></span>Validate</button>

TS： TS 中的复选框启用条件：

 addCheckValue(index, isChecked) {
    if (isChecked === undefined) {
      isChecked = true;
    }
    this.listes[index].isTicked = isChecked;
    console.log(this.listes);
    if (this.listes[index].isTicked === true) {
      this.counts = this.counts + 1;
    }
    if (this.listes[index].isTicked === false) {
      this.counts = this.counts - 1;
    }
  }

TS 中的错误消息：

 error(){
 if(this.counts>this.a){

    this.toastr.error(
  `More cheeckboxes enabled.Total checkbox enabled is ${this.counts}`,
  "Total Error",
  {
    timeOut: 3000
  }

);}
   

 }

所以这段代码不起作用，因为上面的 count 变量计算了复选框（选中和未选中）的点击次数，而不是计算选中了多少 checkboxes .因此，如果我的值为 4，并且如果我选中并取消选中单个复选框 5 次，它将显示错误，这不是我想要的。如果你知道，请帮助我。

Stackblitzlink：https://stackblitz.com/edit/angular-ivy-4vnwed?file=src%2Fapp%2Fapp.module.ts

注意：如果我的问题不清楚，请在 cmets 中告诉我

Answer 1

 
 // Toggle checked flag.
 addCheckValue(index) {
    this.listes[index].isTicked = !this.listes[index].isTicked;
 }
 
 error() {
    const checkedCount = this.listes.filter(item => item.isTicked).length;
    if(checkedCount > this.a) {
       this.toastr.error(
          `More cheeckboxes enabled.Total checkbox enabled is ${this.counts}`,
          "Total Error",
          { timeOut: 3000 });
    }
}
 
 

Answer 2

您可以使用如下所示的 ngModel，而不是使用 change 事件手动处理复选框状态。

<input
    type="checkbox"
    id="vehicle2"
    name="vehicle2"
    [(ngModel)]="list.isTicked"
    [disabled]="list.isDisabled"
/>

这将保持列表的状态，然后您在按钮中单击可以获得如下所示的选中复选框计数并显示消息。

validate(): void {
    var selectedItemsCount = this.listes.filter((x) => x.isTicked).length;
    if (selectedItemsCount > this.maxSelection) {
      this.toastr.error(
        `More cheeckboxes enabled.Total checkbox enabled is ${selectedItemsCount}`,
        "Total Error",
        {
          timeOut: 3000
        }
      );
    }
}

这里是工作代码框。

https://codesandbox.io/s/checkbox-ngmodel-p9282

编辑 1： 如果要在复选框更改时调用 validate 函数，请将 ngModelChange 事件绑定到 checkbox 并将 validate 函数传递给它。

<input
    type="checkbox"
    id="vehicle2"
    name="vehicle2"
    [(ngModel)]="list.isTicked"
    (ngModelChange)="validate()"
    [disabled]="list.isDisabled"
/>