Is there a way to retrieve the optgroup label value within an onchange function on a select box in Angular 4?
In my form, I have a select box with multiple dates as option groups and time slots in 24-hour format for booking (e.g. 1000 for 10AM, 1200 for 12PM, etc).
<select class="form-control" formControlName="arrival_time" (change)="onSlotChange($event)">
<option value="" data-date="" data-slot="">Select Arrival Time</option>
<ng-container *ngIf="!availablePrevSlots">
<optgroup label="{{availablePrevSlotDate}}">
<option value=null hidden>-- No Slot Available --</option>
</optgroup>
</ng-container>
<!-- More ng-containers for different scenarios -->
</select>
I am successfully getting the selected time/slot value using the onchange function. However, I also need to retrieve the optgroup label. Is there a way to achieve this?
When submitting the form, the selected slot is saved in the database. On the edit page, when binding the data, it always shows the first optgroup value selected due to multiple optgroups having the same slots. How can I display the exact optgroup value that was selected?