Ограничить выбираемые кнопки в группе угловых кнопок

Question

Angle Material Button Toggle Group может быть установлен на multiple, а затем от 0 до всех кнопок можно выбрать в группе. Есть ли способ принудительно выбрать хотя бы одну кнопку, а также установить максимум выбранных кнопок (если ограничение равно 2, а пользователь выбирает третью кнопку, первая выбранная кнопка должна измениться на не выбранную). Можно ли добиться этого с mat-button-toggle-group?

Answer 1

Необходимо работать со свойством «значение» группы.В методе изменения передайте всю «группу», используя ссылочную переменную.

например,

    <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