I recently found a helpful guide on stackoverflow related to creating cascading dropdowns in an Angular reactive FormArray, you can check it out here
After following the instructions, I managed to achieve my desired outcome. However, I now face a new challenge. I need assistance in dynamically loading the 'wheres[]' data for each row of the FormArray when retrieving saved information from the database for editing purposes. Although I've made progress, I am encountering issues with the second dropdown. The key lies in loading the 'wheres[]' values correctly based on the stored JSON data and iterating through them.
Here is some context: '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 section should have loaded the list for each of the 2nd dropdown but seems to be failing.
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;
}