domenica 5 maggio 2024

Angular Material mat-select event onSelectionChange uso del isUserInput per evitare doppia chiamata

Quando si utilizza il controllo mat-select in Angular Material, può capitare che l'evento "OnSelectionChange" viene chiamato due volte.
Per gestire tale situazione utilizzare la proprietà isUserInput.

Di seguito un frammento di codice di utilizzo.

HTML:
 <mat-select #mySelect [(ngModel)]="oggetto" formControlName="NomeControllo" >
        <mat-option *ngFor="let oggetto of arrayOggetti"
[value]="oggetto.id"  (onSelectionChange)="onSelectEvent($event, oggetto)">
{{ oggetto.Descrizione }} </mat-option>
 </mat-select>


TypeScript:

onSelectEvent(value: any, parametroOggetto: Oggetto){
   
    if(value.isUserInput)
    {
        //codice da eseguire
    }
 }

Nessun commento: