Вложенные элементы управления ReactiveForms не получают событие ngSubmit - PullRequest
Новая
       12

Вложенные элементы управления ReactiveForms не получают событие ngSubmit

0 голосов
/ 15 ноября 2018

При создании более сложных реактивных форм я наткнулся на проблему, в то время как вложенные реактивные группы более одного раза.

Итак, у меня есть два сценария:

  1. Компонент формы -> Частичный компонент формы -> Пользовательский компонент ввода

  2. Компонент формы -> Пользовательский компонент ввода

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

В моем пользовательском компоненте ввода я внедряю ReactiveFormsDirective через декоратор @Host (). Однако, если компонент вложен, как в сценарии 1, он никогда не получает никаких событий.

Я предполагаю, что проблема в этом сценарии связана с "неправильным" ControlContainer, который он пытается получить. @Host () просто просматривает цепочку инжектора, пока не достигнет хоста, а не дальше. Однако этот FormControlDirective ничего не знает о отправке формы.

Если бы это было так, я бы попытался передать ControlContainer частичному компоненту, чтобы сделать его доступным для компонента ввода. viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective } ]

К сожалению, это не работает так, как ожидалось.

Чтобы сделать это более осязаемым, я создал здесь простой пример: https://stackblitz.com/edit/angular-7rmpvt

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

1 Ответ

0 голосов
/ 15 ноября 2018

Как сказала Кара, основная идея при работе со сложными реактивными формами заключается в том, что мы должны определить только одну директиву [formGroup] на верхнем уровне .

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

Так что если у вас есть вложенная [formGroup], это обычно означает, что у вас есть вложенная форма, которая не связана с родительской формой. Это другая форма верхнего уровня, которая не будет связана с родительской модель. Это довольно распространенный шаблон, потому что для CSS / причины позиционирования, у вас может быть подформа, которая оказывается в тегах формы другой формы, но не имеет отношения (например, форма оформления покупки с подпиской на рассылку новостей).

https://github.com/angular/angular/issues/21263#issuecomment-357074997

Есть также открытый выпуск https://github.com/angular/angular/issues/21823

Учитывая это, мы можем исправить вашу проблему, как вы упомянули, предоставив ControlContainer

AppComponent [formGroup]
   ||
   \/
FormPartialComponent
  1) add viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective } ]
  2) remove [formGroup]
   ||
   \/
FormInputComponent
 remove @Host

Таким образом, мы можем легко использовать formControlName в FormPartialComponent, и FormInputComponent получит верхний уровень FormGroupDirective.

Чтобы сделать это более осязаемым, я обновил ваш Пример Stackblitz

Смотри также:

...