Компонент, совместимый с Reactive Forms, с собственным источником данных

У меня есть компонент DropdownBase, который представляет собой раскрывающийся список con select и option, и он реализует ControlValueAccessor для совместимости с реактивными формами.

Реализация компонента пыталась быть универсальной для входных данных, она имеет следующие входы:

  • optionList: любой []
  • labelKey: строка
  • valueKey: строка

Поэтому для создания параметров я буду перебирать optionList и получать метку и значение с помощью labelKey и valueKey.

До этого момента все в порядке (дайте мне знать, если у вас есть идея получше), но теперь предположим, что у меня есть очень конкретный случай для моего раскрывающегося списка, назовем его CountriesDropdown. Эта реализация использует сервис для получения стран.

Вот где действительно возникает вопрос, предположим, следующая иерархия компонентов:

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

В случае, когда в каждом раскрывающемся списке есть собственная служба (источник данных), должен ли компонент-контейнер иметь все инъекции служб? Или, если, например, CountriesDropdown, я должен сделать компонент контейнера с вызовом службы стран и экземпляром DropdownBase? (Если да, то как я могу обработать formControlName для компонента контейнера)

Спасибо.


angular dropdown angular-reactive-forms
person Iván Portilla    schedule 18.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я сделал нечто подобное, но пошел с возможностью передачи ссылки на метод компоненту для вызовов службы.

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

Затем в родительском компоненте я определил getCustomersTypeAhead:

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

В дочернем компоненте я определил HttpFn как Input ():

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

До сих пор это работало.

person Jesse    schedule 03.10.2018