samedi 13 novembre 2021

Problem with paginator and checkbox selected (Angular Material)

I have 2 problem with paginator and checkbox:

When changing the page (with the paginator) to see the other rows, the checkboxes don't change, they are still active and in the same position in which they were clicked (if I select the first 4 rows on page 1, when I go to page 2, 4 rows are still selected). If it takes the information from the other rows on the other page but if I have 16 rows and I want to select all of them, I won't be able to. The paginator show 10 rows for defect, and the other 6 rows are on the other page of the paginator, and it is those rows that I cannot select because when changing the paginator they are already selected.

The other problem is that I need to do the following condition:

Suppose I have 2 columns (A and B) and 4 rows (1, 2, 3 and 4). If I select row 1 and 2 with checkbox, the data in column A must be different and, at the same time, the data in column B must be the same so that those rows can go to another page, if this condition is not met It should show me an error message, and if I close the message, those rows should be deselected. Any ideas?

Code for checkbox and paginator

HTML:

<button mat-raised-button [disabled]="comprobarFilas()" (click)="procesarClic()">Solicitar</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; let i=index">
                <mat-checkbox #checkbox ((click)="$event.stopPropagation()"
                                    (change)="$event ? selection.toggle(element) : null;"
                                    [checked]="selection.isSelected(element)"
                                    [formControl]="checkedAt(i)">
               </mat-checkbox>
             </mat-cell>
</ng-container>

TS:

checked: FormArray;
selection = new SelectionModel<MyElement>(true, []);

    ngOnInit() {       
            this.checked = new FormArray (
                this.dataSourceSolicitudNew.data.map((x) => new FormControl()),
                this.someChecked()
              );
          }
        
        someChecked() {
            return (form: AbstractControl) => {
              return form.value.find((x) => x)
                ? null
                : { error: 'almost one must be select' };
            };
          }
        
          checkedAt(index: number) {
            return this.checked.at(index) as FormControl;
          }
        
          comprobarFilas() {
            if(this.checked == null) {
                return false;
            }
            else {
              return this.checked.errors;
            }
        }
    
    procesarClic() {
        const request = this.selection.selected
        const newTable = this.dialog.open(SolicitudNewDialog, {
          width: '400px',
          disableClose: true,
          data: { datosItem:request }
        });    
      }

The "procesarClic()" function opens a dialog popup where I must show the list of the items that I selected. Thanks for your help!




Aucun commentaire:

Enregistrer un commentaire