Mat-Select Confirm Selection

Question

I have a mat-select binded to an object Id, when I change the option I open a confirmation alert, I want the selected option to only change if I say OK if I cancel it the option I tried to select is kept selected, not on value but on display.

I tried setting the ngModel back to the same but that doesn't do anything, because my ngModel value isn't changed, only the selected option.

<mat-select title="Repartidor" placeholder="Repartidor" [ngModel]="order._ShippingProviderId" (selectionChange)="shippingProviderChange(order, $event)">
    <mat-option *ngFor="let driverStatus of driverStatuses" [value]="driverStatus._ShippingProvider._Id"> 
        {{driverStatus._ShippingProvider._Name}}
    </mat-option>
</mat-select>

shippingProviderChange(order: IOrder, event: MatSelectChange){
        if(confirm("¿Quieres asignar este repartidor?")) {
            // change option
            console.log(order._ShippingProviderId);
            order._ShippingProviderId = event.value;
            console.log(order._ShippingProviderId);
        }
        else{
            // keep the same option selected
        }
}

The mat-select keeps the option I didn't confirm selected instead of keeping the last one. Resetting the option to none is not an option since my options are binded to objects.

Update #1:

I tried this, and it does change the selected Value to the previous one BUT it doesn't set the selected option to it's original state.

else{ 
    var same = order._ShippingProviderId; 
    order._ShippingProviderId = undefined;
    order._ShippingProviderId = same;
}

you'll have to create a variable that stores the current selection, and then when your dialog is closed on success update the variable to the new selection (by passing it to your dialog) or set the value to be the value of that variable it had before — Pari Baker

iamaword iamaword · Accepted Answer · 2020-09-23T16:27:21

The best way we have found to handle these is set up a separate variable to track the actual value, and conditionally set it based on the confirmation result. the mat-select-trigger removes the appearence of it switching back and forth.

If anything depends on the value of the select changing and running code based on that, it won't have to worry. It can run based on either the change of the variable that actually tracks the value, in this case selectedValue, or be triggered inside of the onSelectionChanged method.

html:

<mat-select
   [(ngModel)]="userSelectedValue"
   (selectionChange)="onProgramChanged($event.value)">
    <mat-select-trigger>{{selectedValue}}</mat-select-trigger>
    <mat-option *ngFor="let option of myOptions> {{option}}<mat-option>
</mat-select>

ts:

userSelectedValue; // ngmodel value
selectedValue; // actual value you use

onSelectionChanged() {
   this.openConfirmationDialog((confirmed) => {   //prompt user for confirmation
       if(confirmed === 'confirm') {
         this.selectedValue = this.userSelectedValue;
         this.dologic()
       } else {
         this.userSelectedValue= this.previousUserSelectedValue;
       }
 }

Mat-Select Confirm Selection

1 Answers