在我的 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);
}
}
uj5u.com熱心網友回復：
您可以使用選中的值來僅禁用未選中的復選框
<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>
uj5u.com熱心網友回復：
由于您的問題很棘手，因此答案也將非常棘手且合乎邏輯。
在 component.html 檔案中添加
<div *ngFor="let item of items;let i=index">
<mat-checkbox [disabled]="getDisabler(i)"
(change)="checkChange($event,i)">{{item.name}}</mat-checkbox>
</div>
在 component.ts 檔案中
首先在 onInit 初始化兩個陣列（即 checker 和 checkerDefault），其值為 true 和 false ，其長度等于資料的長度（在我的情況下，'items' 是資料陣列）
checkdisabler = false;
counter = 0;
checkerDefault = [];
checker = [];
ngOnInit(): void {
this.items.forEach((ele) => {
this.checkerDefault.push(false);
this.checker.push(true);
})
}
接下來添加 mat-checkbox 中提到的方法，該方法在（更改）事件上使用以下代碼呼叫
checkChange(e, i) {
if (e.checked) {
this.checker[i] = false;
this.counter = 1;
if (this.counter == 3) {
this.checkdisabler = true;
}
} else {
this.checkdisabler = false;
this.counter -= 1;
this.checker[i] = true;
}
}
最后添加一個方法（即 getDisabler），當計數達到 3 時禁用未選中的復選框。如果計數器小于 3，則回傳 'checkerDefault'，這是 'false' 值的陣列，如果計數器等于 3，則回傳 'checker'這是一個布林值陣列，檢查為假，未檢查為真。當計數器達到 3 時，這可能會禁用未選中的復選框。
getDisabler(i) {
if (this.checkdisabler) {
return this.checker[i];
} else {
return this.checkerDefault[i];
}
}
我希望這將解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370250.html
上一篇：Angular12材料表。[dataSource]錯誤：提供的資料源與陣列、Observable或DataSource不匹配