title: Angular 5 Nested Form and Validation and Property 'controls' does not exist on type 'AbstractControl'
body: <p>I have setup a nested formgroup. So far everything works fine. But I am not sure how to set up the validation alerts properly when there are nested form elements.</p>
  
  <p>One particular thing that happens is during the build I get error:
  Property 'controls' does not exist on type 'AbstractControl'</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit {
    name = 'Reactive Form - Nested FormGroups';
  
    myForm: FormGroup;
  
    constructor(
      private fb: FormBuilder
    ) {}
  
    ngOnInit() {
      this.buildForm();
    }
  
    buildForm() {
  
      this.myForm = this.fb.group({
  
        user : this.fb.group({
          'firstName': new FormControl('', Validators.required),
          'lastName': new FormControl('', Validators.required)
        }),
  
        'bio': new FormControl()
      });
    }
  }
  </code></pre>
  
  <p>My problem is with the validation see the div with class="validation-message"</p>
  
  <pre><code>&lt;hello name="{{ name }}"&gt;&lt;/hello&gt;
  
  &lt;form [formGroup]="myForm"&gt;
    &lt;div class="my-box" formGroupName="user"&gt;
      &lt;label&gt;
        First Name
        &lt;input type="text" formControlName="firstName"&gt;
        &lt;div class="validation-message" *ngIf="!myForm.controls.user.controls['firstName'].valid &amp;&amp; myForm.controls.user.controls['firstName'].dirty"&gt;
          This field is invalid
        &lt;/div&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="my-box" formGroupName="user"&gt;
      &lt;label&gt;
        Last Name
        &lt;input type="text" formControlName="lastName"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="my-box"&gt;
      &lt;label for="bio" class="block-me"&gt;Bio&lt;/label&gt;
      &lt;textarea formControlName="bio"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;p&gt;
    Data from form: {{ myForm.value | json }}
  &lt;/p&gt;
  </code></pre>