Fetching selected options in mat-select (multiple)

Question

I have a mat-select box with multiple options enabled. When onSelectionChange event occurs, formControl is not updating correctly. To be more clear, suppose if the select box contains the options :- opt-1,opt-2,opt-3,opt-4 and when opt-1 was selected, formControl is not updated. And when we select the next option only, previous value got updated. For instance, if I'm selection opt-2 after opt-1, only opt-1 is updated and if I select opt-3 after that,opt-1 and opt-2 got updated in formControl,but opt-3 is not updated. Below is my sample code.

<mat-select formControlName="selectme" multiple>
   <mat-option *ngFor="let opt for Options" [value]="opt" (onSelectionChange)="printFormControlValue()">
      {{opt}}
   </mat-option>
</mat-select>

//ts file
printFormControlValue(){
console.log(this.formGroup.value.selectme);
}

Each time, when onSelectionChange event triggers, the previous value is being updated, not the current value. How to overcome this issue?

LiHao LiHao · Accepted Answer · 2020-08-09T15:28:15

According to offical document, You need to bind on<mat-select> element not <mat-option> https://material.angular.io/components/select/api

<form [formGroup]="formGroup">
  <mat-form-field appearance="fill">
    <mat-select formControlName="selectme" multiple (selectionChange)="printFormControlValue($event)">
      <mat-option *ngFor="let opt of Options" [value]="opt" >
         {{opt}}
      </mat-option>
   </mat-select>
  </mat-form-field>
</form>

Fetching selected options in mat-select (multiple)

1 Answers