Question

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

我使用过事件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中选择不超过5个选择。

Answer 1

这非常简单，假设您的[(ngModel)]="orderSearchModel.analystId"是一个选定元素的数组-如果使用multiple，则应该是这样。（请务必将您的命名更改为复数，因为现在orderSearchModel.analystId > orderSearchModel.analystIds有点令人困惑）

您可以将此[disabled]属性添加到第二个<mat-option>中，如果不使用selectionChange()，则可以将其删除。

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

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

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

如何限制用户在角形材料设计中最多选择5个选择<垫子选择倍数>

1 个答案: