Within my Angular2 application, I have a dropdown element with 3 different option groups. Here is how it's structured:
<select formControlName="reasonCode" id="reasonCode" class="form-control">
<option value="" [ngValue]="null"></option>
<option *ngFor="let reason of otherLeavingReasons" [ngValue]="reason.longName">
{{reason.longValue}}
</option>
<optgroup label="Managed">
<option *ngFor="let reason of managedLeavingReasons"[ngValue]="reason.longName">
{{reason.longValue}}
</option>
</optgroup>
<optgroup label="Unmanaged">
<option *ngFor="let reason of unmanagedLeavingReasons"[ngValue]="reason.longName">
{{reason.longValue}}
</option>
</optgroup>
</select>
To position the element based on its current value, I added the following code to each option group:
[selected]="reason.longValue == eventForm.controls['reasonCode'].value.longValue"
The issue I'm facing is that this approach doesn't seem to be working as expected. My suspicion is that the problem lies in having 3 option groups. Is there an alternative method to achieve this functionality or perhaps a different component that can handle multiple option groups within a single group?