Angular2 - Can't bind to 'formGroup' since it isn't a known property of 'form'

Question

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.

Paul Samsotha Paul Samsotha · Accepted Answer · 2016-10-18T00:37:53

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.

Angular2 - Can't bind to 'formGroup' since it isn't a known property of 'form'

1 Answers