handling asyn options in dropdown and auto complete inputs with form generator, Angular

I am using a form generator to logic in my application, I want to handle an asynchronous calls inn dropDown and autoComplete inputs based on some formControls value changes.

this is how I construct the dropDownInput in any component:

new DropdownInput({
name: 'Agency Name',
multiple: true,
formControlName: 'agencyIds',
classes: 'col-lg-4 col-md-12 col-sm-12',
placeholder: 'Shams travel',
asyncOptions: (pageSize, pageNo) => this.manageAgency.getAll({ status: 1 }, { pageSize, pageNo }).pipe(map((res) => res.payload)),
optionLabel: 'name',
optionValue: 'id',
VirtualScroll: true,
VirtualScrollObject: {
virtualScrollItemSize: 43,
},
}),


and here is how I handle the options in the DropDownInputComponent:

getOptions(): void {
if (this.input.asyncOptions) {
this.isLoading = true
this.input.asyncOptions(this.pageSize, this.currentPage).subscribe((options) => {
this.isLoading = false
this.options = options
})
this.cdr.detectChanges()
} else {
if (!(this.input.options instanceof Array)) {
;(this.input.options as () => Observable<unknown[]>)().subscribe((options) => (this.options = options))
} else {
this.options = this.input.options
this.cdr.detectChanges()
}
}
}


till now the logic works perfectly fine.

I want to add another logic to asyncOptions so that it accepts a string which is gonna be a formControlName so that I can subscribe to its changes in the DropDownInputComponent and update the options based on it.

I defined asyncOptions as follow:

asyncOptions?: (size: number, page: number) => Observable<T[]> | ((formControlName: string) => Observable<T[]>)


and in some cases it's gonna be like this:

new DropdownInput({
name: 'Agency Name',
multiple: true,
formControlName: 'agencyIds',
classes: 'col-lg-4 col-md-12 col-sm-12',
placeholder: 'Shams travel',
asyncOptions: ('countryId') => this.manageAgency.getAll({ status: 1 }).pipe(map((res) => res.payload)),
optionLabel: 'name',
optionValue: 'id',
VirtualScroll: true,
VirtualScrollObject: {
virtualScrollItemSize: 43,
},
}),


I don't know how can I access the countryId argument in the DropDownInputComponent so that I can handle the logic.

Continue reading...