Geek Answers Handbook

Optgroup knob in select box with angular 4

How can I get the value of the optgroup label in the onchange function in the select box in corner 4

I have the following selection field in a form with several dates as a group of parameters and time in a 24-hour format for booking, for example, 1000, 2001 and 1400 for 10:00, 12:00 and 14:00, respectively.

    <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>
         <ng-container *ngIf="availablePrevSlots">
            <optgroup label="{{availablePrevSlotDate}}">
               <option value=null hidden>HH:MM</option>
               <option *ngFor="let slot of availablePrevSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="!availableSlots">
            <optgroup label="{{availableSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availableSlots">
            <optgroup label="{{availableSlotDate}}">
               <option value=null hidden>HH:MM</option>
               <option *ngFor="let slot of availableSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="!availableNextSlots">
            <optgroup label="{{availableNextSlotDate}}">
               <option value=null hidden>-- No Slot Available --</option>
            </optgroup>
         </ng-container>
         <ng-container *ngIf="availableNextSlots">
            <optgroup label="{{availableNextSlotDate}}">
                <option value=null hidden>HH:MM</option>
                <option *ngFor="let slot of availableNextSlots" [value]="slot">{{slotToString(slot)}}</option>
            </optgroup>
          </ng-container>
      </select>

Now I get the selected time / place value using the onchange function, but I also want to get the option label. Is there any method to get the optgroup label?

also, when we submit the form, we save the slot in the database, and on the edit page we show it with data binding, but since several optgroups can have the same slots, the first optgroup value is always displayed.

, optgroup, .

+3
1

VanillaJS, , :

const selectedIndex = ev.target.selectedIndex;
const optGroupLabel = ev.target.options[selectedIndex].parentNode.getAttribute('label');

Blitz: https://stackblitz.com/edit/angular-64vvdn

+5

More articles:


All Articles