Угловая вложенная дочерняя реактивная форма 6 не сбрасывается - PullRequest
Новая
       32

Угловая вложенная дочерняя реактивная форма 6 не сбрасывается

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

У меня есть двухуровневая вложенная группа FormGroup.

Я передаю @Input группу FormGroup в первую дочернюю сеть компонентов myForm.get('network').

Внутри сети компонентов я прохожу через @Input asub FormGroup network?.get('proxy') в другом компоненте (прокси-компонент).

код стекаблиц

Образец : 

this.myForm = fb.group({ 
     id: [null],
     network: fb.group({
       status: [true],
       proxy: fb.group({ enable: [true] })
     })
  })

Сводка :

Родительский компонент => myForm

дочерний сетевой компонент => * myForm.get('network') ngOnChanges триггер

дочерний дочерний прокси-компонент => myForm.get('network')ngOnChanges не триггер

ps: я использую для каждого ребенка ChangeDetectionStrategy.OnPush.

Проблема :

Но мне кажетсякогда я перезагружаюсь от своего родителя (myForm) myForm.reset(), он сбрасывает только один подуровень в сетевом компоненте, но не в дочернем прокси-компоненте.

Как я могу связать этот сброс от корня до дочернего элемента?

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

Моя идея :

Вызов из сети дочернего прокси с @ViewChild и сброс оттуда, но выглядит странно для меня.

лучшее решение?

Ответы [ 2 ]

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

Вы не получаете сброс для дочерних компонентов из-за ChangeDetectionStrategy.OnPush .

Существует два способа обновления дочерних форм:

  1. Вручную markForCheck() (выбрасывать потомков, сброс только что произошел через комбо субъект / наблюдаемый)
  2. Обновление @Input каждого потомка на reset()

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

Вот рабочий пример : https://stackblitz.com/edit/angular-pskaws

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

Я думаю, вы должны поместить changeDetection: ChangeDetectionStrategy.OnPush в родительский компонент (AppComponent), а не в его дочерние элементы, так как когда вы помещаете его в дочерние элементы, вы говорите родителю, что из него есть какие-либо изменения (родительский) не должен мутировать на них (дети ). Это происходит, когда его данные / форма зависят от другого компонента. Если он независим, вы можете смело ставить OnPush ChangeDetection , чтобы сделать любые из ваших активных данных неизменяемыми.

В вашем случае вы просто заимствуете исходные данные у родителя. Поэтому, когда вы объявляете OnPush для своих дочерних элементов, он устанавливает текущий извлеченный @childForm как собственный и делает его неизменным и не будет заменен никакими событиями / испущенными, если действие не будет выполнено внутри его дочернего компонента.

...