时间戳

首页 > 解决方案 > 限制 Angular Button Toggle Group 中的可选按钮

angular - 限制 Angular Button Toggle Group 中的可选按钮

问题描述

Angular Material Button Toggle Group 可以设置为multiple，然后从 0 到可以选择组中的所有按钮。有没有办法强制必须选择至少一个按钮并设置最大选定按钮（如果限制为 2 并且用户选择第三个按钮，则第一个选定按钮应更改为未选择）。是否有可能实现这一目标mat-button-toggle-group？

标签： angularangular-material

解决方案

您必须使用组的属性“值”。在更改方法中，使用引用变量传递整个“组”。

例如

    <mat-button-toggle-group #group="matButtonToggleGroup" 
                   multiple=true (change)="change(group)">
      <mat-button-toggle *ngFor="let value of [1,2,3,4,5]" [value]="value">
        <mat-icon>format_align_left</mat-icon>
      </mat-button-toggle>
    </mat-button-toggle-group>
    <div class="example-selected-value">Selected value: {{group.value}}</div>

  max:number=2;
  change(group:any)
  {
     //group.value is an array with the elements selected
     if (group.value.length>this.max)
     {
        let newValue=group.value;
        newValue.shift();
        group.value=newValue;     
     }
  }

见stackblitz

推荐阅读