我正在使用 Angular Material 制作一張桌子。在表中，我有資料，這些資料是從我在 JAVA 中創建的資料庫中添加的。復選框的創建取決于資料庫中的行數（資料）。這個想法是必須禁用將此資料發送到另一個表的按鈕，并且必須僅在至少有 1 個活動復選框時啟用它，如果沒有活動復選框，則必須禁用該按鈕。
問題是，當我取消選擇 1 個復選框時，按鈕被禁用，無論其他復選框是否處于活動狀態。
HTML
<button mat-raised-button [disabled]="buttonDisable" (click)="procesarClic()">Enviar</button>
<ng-container matColumnDef="seleccionVarios">
<mat-header-cell *matHeaderCellDef><label class="tituloTabla-verdoso text-center"> CHECKBOX </label></mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox #checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(element) : null; changeCheck($event)"
[checked]="selection.isSelected(element)">
</mat-checkbox>
</mat-cell>
</ng-container>
打字稿
export class PaginaPrincipal implements OnInit {
buttonDisable: boolean = true;
changeCheck(event){
this.buttonDisable = !event.checked;
}
uj5u.com熱心網友回復：
如果你想讓 Angular 為你做，你只需要一個 FormArray 和一個自定義驗證器。
如果你定義
checked:FormArray
當您創建資料源 (*) 時，例如在 ngOnInit 中
ngOnInit() {
this.dataSource = ELEMENT_DATA;
this.checked = new FormArray(
this.dataSource.map((x) => new FormControl()),
this.someChecked()
);
}
您需要兩個輔助功能：
//A custom Validator
someChecked() {
return (form: AbstractControl) => {
return form.value.find((x) => x)
? null
: { error: 'almost one must be select' };
};
}
//and an auxiliar "getter"
checkedAt(index:number){
return this.checked.at(index) as FormControl
}
您可以使用像這樣的單元格
<ng-container matColumnDef="seleccionVarios">
<th mat-header-cell *matHeaderCellDef>...</th>
<td mat-cell *matCellDef="let element;let i=index">
<mat-checkbox [formControl]="checkedAt(i)"> </mat-checkbox>
</td>
</ng-container>
還有你的按鈕：
<button mat-button (click)="submit()" [disabled]="checked.errors">
submit
</button>
而且..瞧！此外，您可以獲得“選定”元素，例如
submit()
{
const selected=this.dataSource.filter((_,index)=>this.checked.value[index])
console.log(selected)
}
see a simple stackblitz
(*)Be carefull, in the example the dataSource is an array, if you use a MatTableDataSource you need iterate over datasource.data
this.dataSource=new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
this.checked = new FormArray(
this.dataSource.data.map((x) => new FormControl()),
this.someChecked()
);
//and in submit
const selected=this.dataSource.data.filter(
(_,index)=>this.checked.value[index])
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348518.html
上一篇：如果我向application.properties添加任何值，SpringBoot專案會崩潰
下一篇：在表單部分中保存的下拉依賴問題