title: Cannot create property 'validator' on string
body: <p>I am trying to create an Angular 5 nested reactive form.</p>
  
  <p>I started by creating a flat form, which worked as expected, but as soon as I extract part of my form and place it in as a child component I get an error</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot create property 'validator' on string 'addressFormGroup'</p>
  </blockquote>
  
  <p>If I just start typing another error is then displayed in the console</p>
  
  <blockquote>
    <p>ERROR TypeError: this.form.get is not a function</p>
  </blockquote>
  
  <p>What am I doing wrong? I've read several threads and tutorials to try and solve this, but I think i'm missing something obvious.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core'
  import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { Address } from '../Property';
  
  @Component({
  moduleId: module.id,
  selector: 'app-property-form',
  templateUrl: './property-form.component.html',
  styleUrls: ['./property-form.component.css']
  })
  export class PropertyFormComponent implements OnInit {
  
  propertyForm: FormGroup;
  
  constructor(private _formBuilder: FormBuilder) {}
  
  ngOnInit() {
      this.createForm();
  }
  
  createForm() {
      this.propertyForm = this._formBuilder.group({
          saleOrLet: ['Sales', Validators.required],
          addressFormGroup: this.initAddress()
      })
  }
  
  initAddress() {
      return this._formBuilder.group({
          houseNameNumber: '',
          address2: '',
          postCode1: '',
          postCode2: ''
      })
  }
  }
  </code></pre>
  
  <p>Working form</p>
  
  <pre><code>&lt;form [formGroup]="propertyForm" novalidate&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Address&lt;/legend&gt;
  &lt;div formGroupName="addressFormGroup"&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;
        House Name Or Number:
        &lt;input placeholder="15 Nursery ave" formControlName="houseNameNumber"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    ...other inputs follow the same pattern...
  &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Broken form (when split in to parent child format)</p>
  
  <p><em>Parent</em></p>
  
  <pre><code>&lt;form [formGroup]="propertyForm" novalidate&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Address 2&lt;/legend&gt;
      &lt;app-property-form-address group="addressFormGroup"&gt;&lt;/app-property-form-address&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>Child</em></p>
  
  <pre><code>&lt;div [formGroup]="group"&gt;
   &lt;div class="form-group"&gt;
      &lt;label&gt;
        House Name Or Number:
        &lt;input placeholder="15 Nursery ave" formControlName="houseNameNumber"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    ...other inputs follow the same pattern...
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Child component</em></p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  
  @Component({
     selector: 'app-property-form-address',
     templateUrl: './property-form-address.component.html',
  })
  export class PropertyFormAddressComponent {
      @Input() group: FormGroup;
  }
  </code></pre>