mercredi 3 novembre 2021

How to activate a button when selecting several mat-checkbox and deactivate it only when nothing is selected? (Angular material)

I'm making a table using Angular Material. Inside the table I have data, which is added from a DB that I have created in JAVA. The checkboxes are created depending on the number of rows (data) that are in the DB. The idea is that the button to send this data to another table MUST BE disabled and it MUST ONLY BE ENABLED when there is at least 1 active checkbox, if there is no active checkbox the button must be disabled.

The problem is that when I deselect 1 checkbox the button is disabled, regardless of whether the other checkboxes are active.

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>

TypeScript

export class PaginaPrincipal implements OnInit {
    buttonDisable: boolean = true;

changeCheck(event){
    this.buttonDisable = !event.checked;
  }




Aucun commentaire:

Enregistrer un commentaire