Reactive Forms compatible component with its own data source

0
votes

I have a component DropdownBase which is a dropdown based con select and option and it implements the ControlValueAccessor for being compatible with Reactive Forms.

The component implementation tried to be generic for the input data, it has the next inputs:

  • optionList: any[]
  • labelKey: string
  • valueKey: string

So for creating the options i will iterate over optionList and getting the label and the value with labelKey and valueKey.

Until this point everything is okay (let me know if you have a better idea), but now let's say i have a very specific case for my dropdown, let's call it CountriesDropdown. This implementation use a service for getting the countries.

Here is where the really question comes, suppose the next component hierarchy:

<form [formGroup]="form">
  <input .../>
  <dropdown-base ...></dropdown-base>
  <dropdown-base ...></dropdown-base>
  <dropdown-base ...></dropdown-base>
<base-form>

For the case where every dropdown has his own service (data source) should the container component have all the service injections? Or if for the example of CountriesDropdown should i make a container component with the countries service call and the instantiation of DropdownBase? (If so, how can i handle the formControlName for the container component)

Thanks.

1
angulardropdownangular-reactive-forms

1 Answers

1
votes

I did something similar, but went with the option of passing a method reference to the component for service calls.

<generic-type-ahead
    formControlName="customer"
    placeholder="Customer"
    [httpFn]="getCustomersTypeAhead">
</generic-type-ahead>

Then in the parent component, I defined getCustomersTypeAhead:

getCustomersTypeAhead = (s: string) => this.customerClient.getCustomerPickList(s);

In the child component, I defined HttpFn as an Input():

  @Input() httpFn: (s: string) => Observable<any[]>;

So far this has been workable.