title: Cannot access the nested formGroup's value
body: <p>I am creating nested formGroup fields. The following is my html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="userProfileForm" (ngSubmit)="bookUser()" class="form"&gt;
      &lt;!-- userName --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="userName"&gt;Name:&lt;/label&gt;
        &lt;input type="text" class="form-control" id="userName" formControlName="userName"&gt;
      &lt;/div&gt;
  
      &lt;!-- mobile --&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="mobileNumber"&gt;Mobile:&lt;/label&gt;
        &lt;input type="text" class="form-control" id="mobileNumber" formControlName="mobileNumber"&gt;
      &lt;/div&gt;
  
      &lt;!-- emailId --&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="emailId"&gt;Email id:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="emailId" formControlName="emailId"&gt;
      &lt;/div&gt;
  
      &lt;!-- password --&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="password"&gt;Password:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="password" formControlName="password"&gt;
      &lt;/div&gt;
  
      &lt;!-- address --&gt;
      &lt;div class="form-group"&gt;
        &lt;div formGroupName="address"&gt;
          &lt;label for="city"&gt;City:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="city" formControlname="city"&gt;
  
          &lt;label for="state"&gt;State:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="state" formControlname="state"&gt;
  
          &lt;label for="zipCode"&gt;Zip Code:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="zipCode" formControlname="zipCode"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Create Profile&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And below is the typescript i am using...</p>
  
  <pre><code>ngOnInit() {
      this.userProfileForm=this.formBuilder.group({
        userName:['', Validators.required],
        mobileNumber:['', Validators.required],
        emailId:['', Validators.required],
        password:['', Validators.required],
        address: this.formBuilder.group({
          city:['', Validators.required],
          state:['', Validators.required],
          zipCode:['', Validators.required]
        })
      });
    }
  </code></pre>
  
  <p>I do not receive the <code>city</code> formControl of the child formGroup when i try to print it in the html.
  I tried accessing the value in different ways like:
  <code>(&lt;FormGroup&gt;this.userProfileForm.get('address')).get('city').value;</code>
  and
  <code>this.city=this.userProfileForm['controls'].address['controls'].city.value</code>
  but i still can't get the city field to display in html.
  I also used <code>this.city=this.userProfileForm['controls'].address['controls'].city.valid</code> and it always returns false.</p>
  
  <p>I have also created 2 model classes:
  UserProfile</p>
  
  <pre><code>import { Address } from "./address";
  
  export class UserProfile{
      userName:string;
      emailId:string;
      password:string;
      mobileNumber:string;
      address:Address;
  }
  </code></pre>
  
  <p>Address</p>
  
  <pre><code>export class Address{
      city:string;
      state:string;
      zipCode:string;
  }
  </code></pre>
  
  <p>How do i access the nested formGroup values?? What am i doing wrong here?</p>