Question

使用https://material.angular.io/components/select/overview#multiple-selection

如何将选择的项目数限制为N个？ N是3或4或5。

Answer 1

在selectionChange组件上设置mat-select输出事件，将其指向您的组件函数：(selectionChange)="changed()"。

摘要：

<mat-select placeholder="Toppings" [formControl]="toppings" (selectionChange)="changed()" multiple>

在您的组件中创建一个名为mySelections的全局变量。这将存储您的选择：)将保存一个字符串数组。

它看起来像这样：

mySelections: string[];

changed() {
  if (this.toppings.value.length < 3) {
    this.mySelections = this.toppings.value;
  } else {
    this.toppings.setValue(this.mySelections);
  }
}

将数字3更改为N，然后保存。

Answer 2

您可以使用mat-option上的disabled属性来执行此操作，如下所示：

<mat-select formControlName="myCtrl" multiple>
            <mat-option [disabled]="formGroup.get('myCtrl').value?.length > 2 && !formGroup.get('myCtrl').value?.includes(o)"
                        *ngFor="let o of itemList"
                        [value]="o">{{o.name}}
            </mat-option>
</mat-select>

如何将Angular Material多个选择项限制为N个项？

2 个答案: