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

Question

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

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

Answer 1

您可以使用 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>

Answer 2

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 3

最佳解决方案仅基于仅禁用未选择的选项。否则就没有意义了，因为禁用所有选项后，怎么可能取消选择任何选项呢？

在 HTML 组件中：

<mat-form-field>
  <mat-select placeholder="Category" [formControl]="categories" multiple>
    <mat-option *ngFor="let cat of categoryArr" [value]="cat.id"
      [disabled]="isOptionDisabled(cat.id)">
      {{cat.title}}
    </mat-option>
  </mat-select>
</mat-form-field>

在控制器中：

isOptionDisabled(opt: any): boolean {
  return this.categories.value.length >= 3 && !this.categories.value.find(el => el == opt)
}

现在：只有已经选择的选项才可以执行某些操作，其他选项将被禁用，如下所示：

用户可以取消选中任何选中的选项，以便用户有机会在表单字段上进行选中/取消选中。