如何限制用户在角度材料设计中最多选择 5 个选择 <mat-select multiple>

Question

我想让用户在 中选择不超过 5 个选择<mat-select multiple>，我将如何实现这一点。

selectionChange我使用的事件，但无法反映用于阻止选择中的用户的 UI，不超过 5 个。

<mat-select [(ngModel)]="orderSearchModel.analystId" name="analyst"  (selectionChange)="onChangeAnalyst($event)" multiple>
    <mat-option (click)="clearAnalyst()">clear</mat-option>
    <mat-option *ngFor="let user of users" [value]="user.value" >{{user.name}}</mat-option>
</mat-select>

我希望用户在我的multi-select.

Answer 1

假设您[(ngModel)]="orderSearchModel.analystId"是一个选定元素的数组，这相当简单- 如果您使用multiple. （确保将您的命名更改为复数，因为现在有点混乱orderSearchModel.analystId > orderSearchModel.analystIds）

您可以将此[disabled]属性添加到您的第二个<mat-option>，如果您不selectionChange()用于其他任何内容，则可以将其删除。

[disabled]="orderSearchModel?.analystId.length >= 5 && !orderSearchModel.analystId.includes(user.value)"

第一个检查是查看当前选择了多少元素。

第二个检查是确保仅禁用尚未选择的元素。