title: How to use formGroupName inside child components
body: <p>How do i use formGroupName inside child components?
  for example: </p>
  
  <p>i have <strong>ParentFormComponent</strong></p>
  
  <pre><code>    parentForm: FormGroup;
      constructor(private fb: FormBuilder, private http: Http) { }
      ngOnInit() {
  
  
   this.parentForm = this.fb.group({
          _general: this.fb.group ({
             ProjectName:''
         })
    })
   }
  </code></pre>
  
  <p>In the html:</p>
  
  <pre><code>  &lt;form [formGroup]="parentForm" (ngSubmit)="submitForm()"&gt;
       &lt;div formGroupName="_general"&gt;
          &lt;mat-form-field&gt;
               &lt;input matInput placeholder="Project name" 
               formControlName="ProjectName"&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt; 
    &lt;/form&gt; 
  </code></pre>
  
  <p>it's working great but when i want to use child component it's not working:</p>
  
  <pre><code>&lt;form [formGroup]="parentForm" (ngSubmit)="submitForm()"&gt;
            &lt;app-child [parentForm]='parentForm'&gt;&lt;/app-child&gt;
        &lt;/form&gt; 
  </code></pre>
  
  <p>when i insert it to the child component:</p>
  
  <pre><code>&lt;div formGroupName="_general"&gt;
              &lt;mat-form-field&gt;
                   &lt;input matInput placeholder="Project name" 
                   formControlName="ProjectName"&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt; 
  </code></pre>
  
  <p>and in the ts file</p>
  
  <pre><code> @Input() parentForm:FormGroup;
  </code></pre>
  
  <p>i"m getting error:
  formGroupName 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).</p>