title: Angular2: how to access a formControl value on a nested formBuilder form
body: <p>How can I get the value of <code>this.resFormGroup.patientName.lastname.value</code> without using <code>[ngModel]</code>?</p>
  
  <p>What are the purpose of <code>name="resForm"</code>, <code>[formGroup]="resFormGroup"</code> and <code>#resNgForm="ngForm"</code> in the HTML <code>&lt;form&gt;</code> tag?</p>
  
  <p>Do I need the template reference variable <code>#resNgForm</code> since I have the <code>[formGroup]="resFormGroup"</code>?</p>
  
  <p>This is my component:</p>
  
  <pre><code>// FormBuilder
  this.resFormGroup = this.formBuilder.group({
    patientName: this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required]
    }),
    address: this.formBuilder.group({
      street: [],
      zip: [],
      city: []
    })
  });
  </code></pre>
  
  <p>This is my template:</p>
  
  <pre><code>&lt;form name="resForm" [formGroup]="resFormGroup" (ngSubmit)="onSubmit()" #resNgForm="ngForm"&gt;
    &lt;fieldset formGroupName="patientName"&gt;
        &lt;legend&gt;Name&lt;/legend&gt;
    &lt;label&gt;Firstname:&lt;/label&gt;
    &lt;input type="text" formControlName="firstname" [(ngModel)]="myFirstName"&gt;
  
    &lt;label&gt;Lastname:&lt;/label&gt;
    &lt;input type="text" ***formControlName="lastname"***&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset formGroupName="address"&gt;
        &lt;legend&gt;Address&lt;/legend&gt;
        &lt;label&gt;Street:&lt;/label&gt;
        &lt;input type="text" formControlName="street"&gt;
  
        &lt;label&gt;Zip:&lt;/label&gt;
        &lt;input type="text" formControlName="zip"&gt;
  
        &lt;label&gt;City:&lt;/label&gt;
        &lt;input type="text" formControlName="city"&gt;
    &lt;/fieldset&gt;
  
    &lt;button type="submit" class="btn btn-primary" [disabled]="!resNgForm.valid"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>My submit button:</p>
  
  <pre><code> onSubmit() { 
     console.log("Submit button pressed [ngModel: " + this.myFirstName + "]    [Form: " + this.resFormGroup.controls["patientName"].dirty + "]"); 
   }
  </code></pre>
  
  <p>With <code>[ngModel]</code>, I can get the first name; I can also access the <code>dirty</code> attribute of the <code>formGroup</code>'s <code>patientName</code>.</p>