Angular 7 Reactive Formarray cascading dropdown - How to load saved data back in UI form

Question

I've followed the stackoverflow link cascading dropdown in reactive formarray

and achieved the desired result. On top of this, I want to load the saved data from DB back to UI when user tries to edit the options again. I've almost achieved that but issues with second dropdown. Need help on loading the wheres[] dynamically for each of the formarray rows. I'm saving the formarray json as such in DB and retrieving the same and iterating.

options: string - the name of the variable in DB where formarray is stored

private retrieveSavedControls(options: string): FormArray{
console.log(classes);
this.profileForm= this.fb.group({
  optionGroups: this.fb.array([])
})
const control = <FormArray>this.profileForm.controls['optionGroups'];

this.units = JSON.parse(options).optionGroups;
console.log('parsed json: ',this.units);
let index =0;
this.units.forEach(unit => {

  control.push(this.fb.group({
    selectInput: ['', Validators.required],
    whereInput: [[], Validators.required]
  }));
  // this part should've loaded the list for each of the 2nd dropdown but not loading.
  this.wheres[unit.selectInput] = this.getWhere().filter((item)=> item.selectid == unit.selectInput); 

   (<FormArray>this.profileForm.controls['optionGroups']).controls[index]
    .patchValue({ selectInput: unit.selectInput, whereInput: unit.whereInput});
  index++
})
console.log('control: ',control)
return control;

}

Answer 1

all. It was an issue from my code. The actual list was empty for some reason. It was fixed and it successfully loaded the selected values against each individual list.