title: Nested angular forms can't find FormGroup
body: <p>I've got the template under *ngIf and it only generates after the form is loaded. Additionally, I've got the failing form under a dynamically displayed field, which depends on a button press. I log out the form, and it returns the FormControl which is missing correctly. </p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div *ngIf="ready"&gt;
   &lt;form [formGroup]="form"&gt;
          &lt;div [formGroup]="form.controls.request"&gt;
            &lt;div *ngFor="let field of inputFields"&gt;
              ...
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div *ngIf="somethingEnabled"&gt;
            &lt;div [formGroup]="form.controls.Something"&gt;
              &lt;div class="input-container"&gt;
                &lt;label&gt;Name: &lt;/label&gt;
                &lt;input formControlName="Name"&gt;
              &lt;/div&gt;
  
              &lt;div [formGroup]="form.controls.Something.Organization"&gt;
  
                &lt;div class="input-container"&gt;
                  &lt;label&gt;ASD: &lt;/label&gt;
                  &lt;input formControlName="ASD"&gt;
                &lt;/div&gt;
  
                &lt;div [formGroup]="form.controls.Something.Organization.Other"&gt;
                  &lt;div class="input-container"&gt;
                    &lt;label&gt;Id: &lt;/label&gt;
                    &lt;input formControlName="Id"&gt;
                  &lt;/div&gt;
  
                  &lt;div [formGroup]="form.controls.Something.Organization.Other.SchmeNm"&gt;
  
                    &lt;div class="input-container"&gt;
                      &lt;label&gt;SchmeName: &lt;/label&gt;
                      &lt;input formControlName="SchmeName"&gt;
                    &lt;/div&gt;
  
                    &lt;div class="input-container"&gt;
                      &lt;label&gt;SchmeValue: &lt;/label&gt;
                      &lt;input formControlName="SchmeValue"&gt;
                    &lt;/div&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>code:</p>
  
  <pre><code> generateForm() {
      this.form = this.fb.group({
        request: this.fb.group(
          this.generateRequestFields())
        ,
        Something: this.fb.group(this.generateSomething()),
        address: this.fb.group(
          this.generateAddress()
        )
      });
    }
  
    generateSomething() {
      const returnObject = {};
      returnObject['Name'] = new FormControl();
      returnObject['Organization'] = this.fb.group(this.generateOrganization());
      return returnObject;
    }
  
    generateOrganization() {
      const returnObject = {};
      returnObject['ASD'] = new FormControl();
      returnObject['Other'] = this.fb.group({
        Id: new FormControl(),
        Schme: this.fb.group({
          SchmeName: new FormControl(),
          ShcmeValue: new FormControl()
        }),
        Issr: new FormControl()
      });
      return returnObject;
    }
  </code></pre>
  
  <p>I only get the error when activating the <strong>form.controls.something</strong> part.
  It works fine if I remove <strong>form.controls.Something.Organization</strong> part of the template.</p>
  
  <p>Error:
  ERROR Error: formGroup expects a FormGroup instance. Please pass one in.</p>
  
  <p>I might have just missed something, and was hoping I'll find it while posting this, but still can't seem to get it</p>