title: Cannot define a form group in a reactive angular form
body: <p>I am trying to create a formGroup inside a reactive form. This includes some fields that I would like to observe both for any changes. I am doing what the <a href="https://angular.io/guide/reactive-forms#step-1-creating-a-nested-group" rel="nofollow noreferrer">official guide</a> says and I still get errors. </p>
  
  <p>This is my code </p>
  
  <pre><code>      &lt;form [formGroup]="myForm" (ngSubmit)="myFormSubmit()"&gt;
          &lt;div [formGroup]="myFormNameDrop"&gt;
              &lt;label&gt;
                  &lt;input type="text" formControlName="myName" required &gt;
                &lt;/label&gt;
                &lt;label&gt;
                    &lt;select name="myDrop" selected formControlName="myDrop" (change)="myDropChanged($event)"&gt;
                      &lt;option value="era" &gt;era&lt;/option&gt;                      
                      &lt;option value="plate"&gt;plate&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/label&gt;
              &lt;/div&gt;&lt;!-- myFormNameDrop--&gt;
  
         &lt;!-- more dropdowns --&gt;
         &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>How I define the form in the component </p>
  
  <pre><code>  myForm = this.formBuilder.group({
      myFormNameDrop: this.formBuilder.group({
        myName:['',Validators.required],
        myDrop:['era']
      }),    
      day:[''],
      type:[''],
      style:[''],
      userId:[this.user_id]
    });
  </code></pre>
  
  <p>Then I would like to do something like </p>
  
  <p><code>this.data = this.myForm.myFormNameDrop.valueChanges.pipe(</code></p>
  
  <p>But I get the following error</p>
  
  <p>`ERROR Error: formGroup expects a FormGroup instance. Please pass one in.</p>
  
  <pre><code>   Example:
  
  
  &lt;div [formGroup]="myGroup"&gt;
    &lt;input formControlName="firstName"&gt;
  &lt;/div&gt;
  
  In your class:
  
  this.myGroup = new FormGroup({
     firstName: new FormControl()
  });
  at Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.missingFormException (forms.js:994)
  at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._checkFormPresent (forms.js:4382)
  at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (forms.js:4292)
  at checkAndUpdateDirectiveInline (core.js:8935)
  at checkAndUpdateNodeInline (core.js:10203)
  at checkAndUpdateNode (core.js:10165)
  at debugCheckAndUpdateNode (core.js:10798)
  at debugCheckDirectivesFn (core.js:10758)
  at Object.eval [as updateDirectives] (MapcmsComponent.html:106)
  at Object.debugUpdateDirectives [as updateDirectives] (core.js:10750)`
  </code></pre>
  
  <p>tha is about this line <code>&lt;form [formGroup]="myForm" (ngSubmit)="myFormSubmit()"&gt;</code></p>
  
  <p>Please help me debug this. I use Angular 6 </p>
  
  <p>Thanks</p>