点击条件复选框上的 Toastr 消息 angular

Question

简介:

我有一个 table，其中 table 的一列仅包含 复选框 因为 values.I 有一个名为验证。我在 table.The value 上面有一个 value ，我分配的是 4。如果我启用更多，我需要显示一条 toastr 消息没有超过上面给出的数量的复选框。

我的问题:

例如，如果上面的数字是4，我最多只能勾选4个复选框。如果超过 4 个 复选框 checked.I 需要在单击验证按钮时显示 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 变量计算了复选框（选中和未选中）的点击次数，而不是计算有多少 复选框 已选中。因此，如果我有一个值 4，并且如果我选中和取消选中一个复选框 5 次，它将显示错误，这不是我想要的。如果你知道请帮助我。

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

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

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： 如果您想在复选框更改时调用验证函数，则将 ngModelChange 事件绑定到复选框并将验证函数传递给它。

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

点击条件复选框上的 Toastr 消息 angular

Toastr messages on conditional checkbox click angular

javascript

checkbox

typescript

angular

angular6