3

I'm aware of other questions regarding the topic, but I seem to be missing something regarding importing FormsModule and ReactiveFormsModule.

I have a modal component with a dynamic body. The idea is to have a reusable modal base with a dynamic body that's either loaded from a URL or populated from a pre-loaded template.

(Simplified for brevity)

modal-dialog.html

<!--modal-content-->

<!--modal-header-->

<modal-body [BodyTemplateUrl]="BodyTemplateUrl" [BodyTemplate]="BodyTemplate"></modal-body>

<!--modal-footer-->

modal-body.html (dynamic template using angular2-component-outlet)

  <ng-container *componentOutlet="template; context: context"></ng-container>

modal-body.component.ts

@Input() BodyTemplateUrl: string;
@Input() BodyTemplate: string;

constructor() { }

ngAfterViewInit() {
  // this.template = require(this.BodyTemplateUrl);  // 'module undefined' when doing this

  this.template = this.BodyTemplate;  // can't bind to formGroup error.. 
}

licences.html

<modal-dialog [HeaderText]="modalHeaderText"
          [ActionButtonText]="actionButtonText"
          [OkButtonText]="okButtonText"
          [CloseButtonText]="closeButtonText"
          [BodyTemplateUrl]="bodyTemplateUrl"
          [Body]="bodyTemplate">
</modal-dialog>

I tried to have the 'modal-body' component load the 'BodyTemplateUrl', but got 'module undefined' error. Q1 - is this URL relative to the modal-dialog component or the licences component?

Now I load the body template in the 'licences.component' and pass it to the dialog components via inputs. The problem now is that the 'licences.add.html' (body template) does not recognize the [formGroup] directive, with error 'Can't bind to 'formGroup' since it isn't a known property of 'form''.

The ReactiveFormsModule and FormsModules are imported (and exported) in the SharedModule where the modal module lives. The SharedModule is then imported in the 'licences.module' for access to the modal components.

Community
  • 1
  • 1
ceebreenk
  • 1,031
  • 2
  • 14
  • 29

1 Answers1

2

The ReactiveFormsModule and FormsModules are imported (and exported) in the SharedModule where the modal module lives.

Not going to work like this. Modules don't inherit anything from parents. Modules should be self contained. So ModalModule doesn't get forms from SharedModule.

To fix this, you may think you can import SharedModule into ModalModule (to get the forms), but that work, as you will have a circular dependency and cause it break. So you just need to import the forms modules in to the ModalModule directly, if you want to include it in the SharedModule.

Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
  • If `FormsModule` is added to `exports` in `SharedModule` he also should get what he wants. – Günter Zöchbauer Oct 18 '16 at 05:02
  • 1
    @GünterZöchbauer It's not something I've testing, but are you saying that if `ModalModule` is imported into `SharedModule`, as long as `SharedModule` exports `FormsModule`, then `ModalModule` can use `FormsModule` – Paul Samsotha Oct 18 '16 at 05:05
  • For example if you add `BrowserModule`, you don't need to add `CommonModule` https://github.com/angular/angular/blob/41c8c309730d36e46012f6461e8c94d84b13554d/modules/%40angular/platform-browser/src/browser.ts#L91 – Günter Zöchbauer Oct 18 '16 at 05:06
  • @GünterZöchbauer But other modules that you import into the app module don't have access to that CommonModule. They still need to import it themselves. The problem the OP is facing is related to my previous comment. The OP actually says they have done this. My understanding is that it shouldn't work – Paul Samsotha Oct 18 '16 at 05:07
  • You need to import every module that you use in any way, but you don't need to import every module directly. You can import many modules at once by adding one module that exports all the others you use. I wouldn't overuse this approach, just wanted to note that this is possible. – Günter Zöchbauer Oct 18 '16 at 05:09
  • I'm changing my approach slightly; I have a feeling I've got my module loading messed up somewhere. Will post my solution. – ceebreenk Oct 19 '16 at 06:15