title: Angular2: nested form group
body: <p>I've created this form:</p>
  
  <pre><code>this.cardForm = this.fb.group({
      number: ['', Validators.compose([Validators.required, this.validateCardNumber])],
      holderName: ['', Validators.required],
      expiry: this.fb.group({
        expirationMonth: ['', Validators.required],
        expirationYear: ['', Validators.required],
      }),
  </code></pre>
  
  <p>As you can see, I've created a nested form group named <code>expiry</code>. Into my template:</p>
  
  <pre><code>&lt;form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="cardnumber"&gt;Card number&lt;/label&gt;
      &lt;input
          type="text"
          formControlName="number"
          placeholder="Card number"
          name="cardnumber"
          class="input-transparent form-control"&gt;
    &lt;/div&gt;
    ...
    &lt;div class="form-group" formGroupName="expiry"&gt;
      &lt;label for="expirationmonth"&gt;Expiration month&lt;/label&gt;
      &lt;select2 id="default-select"
        name="expirationmonth"
        [data]="months$ | async"
        [width]="250"
        [options]="select2Options"&gt;
      &lt;/select2&gt;
  
      &lt;label for="expirationyear"&gt;Expiration year&lt;/label&gt;
      &lt;select2 id="default-select2"
        name="expirationyear"
        [data]="years$ | async"
        [width]="250"
        [options]="select2Options"&gt;
      &lt;/select2&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm getting this error:</p>
  
  <pre><code>ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
  
     Example:
  
  
  &lt;div [formGroup]="myGroup"&gt;
    &lt;input formControlName="firstName"&gt;
  &lt;/div&gt;
  
  In your class:
  
  this.myGroup = new FormGroup({
     firstName: new FormControl()
  });
  </code></pre>
  
  <p>Any ideas?</p>