I've several drop-downs on a form that works in cascading effect - first dropdown controls the values to be shown in the second dropdown and so on. The values for each dropdown comes from an async data service(s). I am using Angular EventEmitter to emit events and get the data for subsequent drop-down. There are 5 such interdependent dropdowns.
Cascade operation:
Dropdown1 -> Dropdown2 -> Dropdown3 -> Dropdown4 -> Dropdown5
onChangeDropdown1(selectedValue) -> fillDropdown2 with selected value -> onChangeDropdown2(selectedValue) -> fillDropdown3 with selected value -> ... till dropdown 5
Selected values are persisted in a state object:
dropDownSelection = {
Dropdown1Val: "val1",
Dropdown2Val: "val2",
Dropdown3Val: "val3",
Dropdown5Val: "val4",
Dropdown5Val: "val5",
}
The problem is when the form is opened in edit mode, we need to fire all events in sequential order and get appropriate values (again from the async data service) in drop-down with selected / stored values.
When the selection object / state that holds the selected values for all dropdowns is assigned to the form object/model, the change events are fired however the dropdowns are empty and also not selected (as they dont have values yet), the order in which events should fire is all simultaneous instead of sequential / cascade and also the since, the data service is async the dropdowns are not filled at the right time.
Related mark-up -
<div class="form-group form-inline">
<select [(ngModel)]="dropDownSelection.Dropdown1Val" class="form-control" id="Dropdown1" (ngModelChange)="onChangeDropdown1()" name="Dropdown1">
<option *ngFor="let _val of _dd1"
[ngValue]="_val">
{{_val}}
</option>
</select>
</div>
<div class="form-group form-inline">
<select [(ngModel)]="dropDownSelection.Dropdown2Val" class="form-control" id="Dropdown2" (ngModelChange)="onChangeDropdown2()" name="Dropdown2">
<option *ngFor="let _val of _dd2"
[ngValue]="_val">
{{_val}}
</option>
</select>
</div>
<!-- dropdowns 3, 4 here -->
<div class="form-group form-inline">
<select [(ngModel)]="dropDownSelection.Dropdown5Val" class="form-control" id="Dropdown5" name="Dropdown5">
<option *ngFor="let _val of _dd5"
[ngValue]="_val">
{{_val}}
</option>
</select>
</div>
