Инициализировать formGroup с зависимыми выпадающими - PullRequest
Новая
       35

Инициализировать formGroup с зависимыми выпадающими

0 голосов
/ 31 января 2019

У меня есть проблема, которая решена и работает, но сейчас она слишком сложна, поэтому я ищу более простое решение.

В основном у меня есть реактивная форма с несколькими выпадающими списками, которые зависят друг от друга.

Пример: 

myFormGroup = formBuilder.group({
  Dropdown1: [''],
  Dropdown2: [''], // selection values depend on Dropdown 1
  Dropdown3: [''], // selection values depend on Dropdown 2
});

После создания formGroup я загружаю возможные значения для Dropdown1 из Сервиса и одновременно подписываюсь на valueChanges Dropdown1.

Пример: 

loadDropdown1() {
  this.myService.getDropdown1Values().subscribe(
    values => {
      .. // save to local var
      this.subscribeDropdown1Change();
    }
  );
}

subscribeDropdown1Change() {
  this.myFormGroup.controls.Dropdown1.valueChanges
  .pipe(
     // see: https://github.com/angular/angular/issues/15282
     startWith(this.myFormGroup.controls.Dropdown1.value)
   )
   .subscribe(
     selectedValue => this.loadDropdown2(selectedValue)
  )
}

... and so on

Это дает мне правильные значения во втором выпадающем меню, как только первый изменится.Чтобы инициализировать форму с существующими значениями, я использую что-то вроде myFormGroup.patchValue(formData);.Это не вызывает valueChange, поэтому мне пришлось добавить startWith().

. Например, теперь, если первый выпадающий список изменяется, вам нужно сбросить значения в зависимости от выпадающего списка, это также требует дополнительной логики, потому что этоне следует сбрасывать в исходное значение valueChange.

Если эти выпадающие списки находятся внутри FormArray или если форма становится более сложной, она быстро выходит из-под контроля.

Так чтоЯ хотел бы знать, если есть более простой способ справиться с этим.Инициализация formGroup с зависимыми значениями в порядке.Но загрузка дополнительных данных, в которых нуждаются различные компоненты формы, является огромной проблемой для этого решения.

Вся информация, которую я смог найти, в основном останавливается при создании формы с зависимыми значениями, но не объясняет, каквы бы обновили существующие данные.Кто-нибудь знает источник?

1 Ответ

0 голосов
/ 04 февраля 2019

С той же проблемой, с которой я столкнулся в своем проекте.Я использовал подход валидации, основанный на декораторе среды валидации rxweb.

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

В примере приложения я рассмотрел сценарий, когда пользователь меняет страну, тогда значение formcontrol штата и города должно быть нулевым и соответствующимисточник будет привязан.

Вот пример изображения.

enter image description here

Работа пример со стеком бликов.

Вам не нужно подписывать изменения стоимости.Я ссылался на эту статью, чтобы добиться этого: https://medium.com/@oojhaajay/new-way-to-validate-the-angular-reactive-form-2c4fe4f13373

...