Angular Material 条件下禁用复选框

Question

在我的 Angular 应用程序中，我有一个动态生成的具有多个 FormArray 的响应式表单。其中一个 FormArrays 包含 6 个复选框。我只希望用户能够选中 3 个复选框，因此我计算了选中复选框的数量。当计数超过 3 时，布尔值设置为 true，如果计数低于 3，则再次设置为 false。这里的问题是，一旦复选框被禁用，用户将无法取消选择他选中的框之一，因为复选框已完全禁用。

我想要完成的是，一旦计数高于 3，就无法再选中未选中的复选框，而用户仍然可以取消选中他已经选中的复选框。

我正在使用带有 [disabled] 属性的 Angular Material 复选框。我怎样才能实现所描述的行为？

HTML

<mat-checkbox *ngIf="option.key === 'vacancy'" (change)="onCheckboxChangeEvent(option.key, value, $event)" [checked]="isActiveValue(optie.key, value)" [disabled]="vacancyDisabled">
                            {{ value }}</mat-checkbox>

TS

onCheckboxChangeEvent(
    key: string,
    value: string,
    event: MatCheckboxChange
): void {
    const feature = this.candidateForm?.get(key) as FormArray;

    if (event.checked) {
        if (key === 'vacancy') {
            this.selectedVacancy++;
            if (this.selectedVacancy >= 3) {
                this.vacancyDisabled = true;
                console.log('disable');
            }
        }
        feature.push(new FormControl(value));
    } else {
        if (key === 'vacancy') {
            this.selectedVacancy--;
            if (this.selectedVacancy <= 3) {
                this.vacancyDisabled = false;
                console.log('enable');
            }
        }
        const index = feature.controls.findIndex((x) => x.value === value);
        feature.removeAt(index);
    }
}

Answer 1

您可以使用选中的值来仅禁用未选中的复选框

<mat-checkbox *ngIf="option.key === 'vacancy'" (change)="onCheckboxChangeEvent(option.key, value, $event)" 
[checked]="isActiveValue(optie.key, value)" 
[disabled]="vacancyDisabled  && ! isActiveValue(optie.key, value)">
{{ value }}
</mat-checkbox>

Angular Material 条件下禁用复选框

Angular Material Checkbox disabled on condition

angular

checkbox

angular-material

angular-reactive-forms