When attempting to use ngModel to bind a value in a mat-select dropdown, I encountered an issue. The options have values like A - A/C Loss and B - BURGLARY. After checking the option checkbox, I only want to bind A and B, removing A/C Loss and BURGLARY.
Here is an example of the options values: https://i.sstatic.net/gbHt3.png And here is an example of the ngModel bound values: https://i.sstatic.net/VmRHw.png The desired result for ngModel binding should be: A,B,CF,CI,CM,CR
Example Code:
<mat-select placeholder="Select Events" [formControl]="selectEventitems" [(ngModel)]="selectedEventValue" (change)="onEventsChange($event)" (focus)="onEventfocus($event)" multiple>
<mat-option class="select-all" value="SelectAll">Select All</mat-option>
<mat-option *ngFor="let event of getAllEvents" [value]="event.eventrpt_id">{{event.eventrpt_id}} - {{event.descr}}</mat-option>
</mat-select>