title: How to use formControlName and deal with nested formGroup?
body: <p>As Angular <a href="https://angular.io/docs/ts/latest/guide/reactive-forms.html" rel="noreferrer">documentation</a> says we can use <code>formControlName</code> in our forms:</p>
  
  <pre><code>&lt;h2&gt;Hero Detail&lt;/h2&gt;
  &lt;h3&gt;&lt;i&gt;FormControl in a FormGroup&lt;/i&gt;&lt;/h3&gt;
  &lt;form [formGroup]="heroForm" novalidate&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="center-block"&gt;Name:
              &lt;input class="form-control" formControlName="name"&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As they say...</p>
  
  <blockquote>
    <p>Without a parent FormGroup, [formControl]="name" worked earlier because that directive can stand alone, that is, it works without being in a FormGroup. With a parent FormGroup, the name input needs the syntax formControlName=name in order to be associated with the correct FormControl in the class. This syntax tells Angular to look for the parent FormGroup, in this case heroForm, and then inside that group to look for a FormControl called name.</p>
  </blockquote>
  
  <p>Anyway some months ago I asked <a href="https://stackoverflow.com/questions/40171914/what-is-the-difference-between-formcontrolname-and-formcontrol">this</a> to figure out what is the difference between <code>formControlName</code> and <code>[formControl]</code>.</p>
  
  <p>Now my question is: what about use <code>formControlName</code> with nested FormGroups?</p>
  
  <p>For example, if I have the following form structure:</p>
  
  <pre><code>this.myForm = fb.group({
      'fullname': ['', Validators.required],
      'gender': [],
      'address': fb.group({
          'street': [''],
          'houseNumber': [''],
          'postalCode': ['']
      })
  });
  </code></pre>
  
  <p>What is the right way to bind "street" (or "houseNumber" or "postalCode") to related HTML elements using <code>formControlName</code>?</p>