title: Angular2 - Can't bind to 'formGroup' since it isn't a known property of 'form'
body: <p>I'm aware of <a href="https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form;">other</a> questions regarding the topic, but I seem to be missing something regarding importing FormsModule and ReactiveFormsModule.</p>
  
  <p>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.</p>
  
  <p>(Simplified for brevity)</p>
  
  <p><strong>modal-dialog.html</strong></p>
  
  <pre><code>&lt;!--modal-content--&gt;
  
  &lt;!--modal-header--&gt;
  
  &lt;modal-body [BodyTemplateUrl]="BodyTemplateUrl" [BodyTemplate]="BodyTemplate"&gt;&lt;/modal-body&gt;
  
  &lt;!--modal-footer--&gt;
  </code></pre>
  
  <p><strong>modal-body.html</strong> (dynamic template using <a href="https://github.com/laco0416/angular2-component-outlet" rel="nofollow noreferrer">angular2-component-outlet</a>)</p>
  
  <pre><code>  &lt;ng-container *componentOutlet="template; context: context"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p><strong>modal-body.component.ts</strong></p>
  
  <pre><code>@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.. 
  }
  </code></pre>
  
  <p><strong>licences.html</strong></p>
  
  <pre><code>&lt;modal-dialog [HeaderText]="modalHeaderText"
            [ActionButtonText]="actionButtonText"
            [OkButtonText]="okButtonText"
            [CloseButtonText]="closeButtonText"
            [BodyTemplateUrl]="bodyTemplateUrl"
            [Body]="bodyTemplate"&gt;
  &lt;/modal-dialog&gt; 
  </code></pre>
  
  <p>I tried to have the 'modal-body' component load the 'BodyTemplateUrl',
  but got 'module undefined' error. <strong>Q1 - is this URL relative to the modal-dialog component or the licences
  component?</strong></p>
  
  <p>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''.</p>
  
  <p>The <strong>ReactiveFormsModule and FormsModules are imported (and exported) in the SharedModule</strong> where
  the modal module lives. The SharedModule is then imported in the 'licences.module'
  for access to the modal components.</p>