Angular: несколько вложенных формгрупп в компоненте - PullRequest
Новая
       7

Angular: несколько вложенных формгрупп в компоненте

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

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

Вот пример, который работает

Template 

<form [formGroup]="baseForm">
  <div formGroupName="nestedForm1">
    <div formGroupName="nestedForm2">
      <input formControlName="nestedControl">
    </div>
  </div>
</form>

Машинопись 

this.baseForm = this.formBuilder.group({
  nestedForm1: this.formBuilder.group({
    nestedForm2: this.formBuilder.group({
      nestedControl: ["Default Value"]
    })
  })
});

Если я попытаюсь передать "nestedForm1" и "nestedForm2" в отдельный компонент, это произойдетбольше не работает со второго уровня.

Пример можно найти по следующей ссылке.Там вы можете попробовать оба способа, закомментировав соответствующие части кода в "app.component.html"

https://stackblitz.com/edit/angular-gnpw24?file=src%2Fapp%2Fapp.component.html

1 Ответ

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

Это потому, что ControlContainer провайдер может быть зарегистрирован по любой из следующих директив:

Директивы на основе шаблонов

  • NgForm
  • NgModelGroup,

Реактивные директивы

  • FormGroupDirective
  • FormGroupName
  • FormArrayName

но вы ожидаете, что это будет всегда FormGroupDirective, в то время как во втором компоненте родительский ControlContainer равен FormGroupName.

Я бы использовал общее решение, которое будет работать независимо от типа родительского элемента ControlContainer: 

viewProviders: [{
  provide: ControlContainer,
  useFactory: (container: ControlContainer) => container,
  deps: [[new SkipSelf(), ControlContainer]],
}]

Разветвленный стек-блиц

...