title: Getting Error: formGroup expects a FormGroup instance. Please pass one in
body: <p>I am new to Angular 2 and unable to resolve this issue <b>even after going through other stack overflow answers.</b></p>
  
  <p>I have just now started learning angular reactive forms and want to try the first example but am stuck. Please help.</p>
  
  <p>Here is the HTML form.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"&gt;
        &lt;form [formGroup]="signupForm" (ngSubmit)="onSubmit()"&gt;
          &lt;div id="user-data"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="username"&gt;Username&lt;/label&gt;
              &lt;input
                type="text"
                id="username"
                formControlName="username"
                class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="email"&gt;Email&lt;/label&gt;
              &lt;input
                type="email"
                id="email"
                formControlName="email"
                class="form-control"&gt;
            &lt;/div&gt;
            &lt;div class="radio" *ngFor="let gender of genders"&gt;
              &lt;label&gt;
                &lt;input
                  type="radio"
                  class="form-control"
                  formControlName="gender"
                  [value]="gender"&gt;{{ gender }}
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary" type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the TS file.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  import { FormControl } from '@angular/forms';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
  
    genders = ['male', 'female'];
    // property to hold the form
    sigupForm: FormGroup;
  
    ngOnInit() {
      // initialize the form before rendering the template
      // hence 'OnInit' because this gets executed before the template is rendered// pass js object
      // {} tells this form doesn't has any 'controls'
      // 'controls' are key-value pairs to the overall form group
  
      this.sigupForm = new FormGroup({
        // form controls
        // arg1 - intial state/value of this control
        // arg2 - single validator or an array of validators
        // arg3 - async validators
        'username': new FormControl(null),
        'email': new FormControl(null),
        'gender': new FormControl('male')
      });
    }
  
    onSubmit() {
      console.log(this.sigupForm);
    }
  }
  </code></pre>
  
  <p>In the output, I can see Username and Email Field but no Gender field.</p>
  
  <p>Would you please help me out with fixing this?</p>
  
  <p>I am sure it would be a minor change only but still, I am unable to figure out.</p>