title: formControlName must be used with a parent formGroup directive
body: <p>While creating model driven form, i am getting an error: <strong><em>Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
         directive and pass it an existing FormGroup instance (you can create one in your class).</em></strong></p>
  
  <p>Please tell me whats going wrong in this code.</p>
  
  <blockquote>
    <p>app.component.html</p>
  </blockquote>
  
  <pre><code>&lt;div class="col-md-6"&gt;
    &lt;form  (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="sessionName"&gt;Session Name:&lt;/label&gt;
        &lt;input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="abstract"&gt;Abstract:&lt;/label&gt;
        &lt;textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>app.component.ts</p>
  </blockquote>
  
  <pre><code>export class CreateSession {
  
      newSessionForm:FormGroup;
      abstract : FormControl;
      name : FormControl;
  
      ngOInInit(){
          this.name = new FormControl('', Validators.required)
          this.abstract = new FormControl('', Validators.required)
  
          this.newSessionForm = new FormGroup({
              name:this.name,
              abstract: this.abstract
          })         
      }
  
  
      saveSession(formValues){
          console.log(formValues);
      }
  </code></pre>