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

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

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

Шаблон

<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


typescript angular formgroups
person Murolack    schedule 29.11.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

  • NgForm
  • NgModelGroup,

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

  • FormGroupDirective
  • FormGroupName
  • FormArrayName

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

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

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

раздвоенный Stackblitz

person yurzui    schedule 29.11.2018
comment
Это работает как шарм, спасибо за этот быстрый ответ :-D - person Murolack; 29.11.2018
comment
Как заставить его работать, когда каждая вложенная группа форм определена в компоненте? - person maxlego; 25.12.2018
comment
@maxlego Можете ли вы привести пример на stackblitz? - person yurzui; 25.12.2018
comment
@yurzui stackblitz.com/edit/angular-bwiq87. как вы можете видеть, nestedForm1 имеет значение null - person maxlego; 26.12.2018
comment
@maxlego Вариант 1 stackblitz.com/edit/angular- c7znw8? file = src / app / Вариант 2 stackblitz.com/edit/angular-tbkqg2?file=src/app/ - person yurzui; 26.12.2018