title: Angular2 FormBuilder and nested object property returns undefined
body: <p>I'm just getting my feet wet with TypeScript and Angular2. I'm working with an API that has a nested object structure. I would like my model to mirror the resource from the API. The model/resource, "Inquiry", as defined in TypeScript:</p>
  
  <pre><code>// inquiry.ts
  export class Inquiry {
    name: {
      first: string,
      last: string
    };
    email: string;
    phone: string;
    question: string;
  }
  </code></pre>
  
  <p>My form component is as such:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { InquireService } from './inquire.service';
  import { Inquiry } from './inquiry';
  
  @Component({
    selector: 'inquire-form',
    templateUrl: './inquire-form.component.html'
  })
  export class InquireFormComponent implements OnInit {
    inquiryForm: FormGroup;
    inquiry = new Inquiry;
  
    constructor(
      private formBuilder: FormBuilder,
      private inquireService: InquireService) {}
  
    ngOnInit(): void {
      this.buildForm();
    }
  
    buildForm(): void {
      this.inquiryForm = this.formBuilder.group({
        'firstName': [
          this.inquiry.name.first, [
            Validators.required,
            Validators.minLength(2),
            Validators.maxLength(50)
          ]
        ], ...
    }
  }
  </code></pre>
  
  <p>The error I get when I hit my route is:</p>
  
  <pre><code>Error: Uncaught (in promise): TypeError: Cannot read property 'first' of undefined
  </code></pre>
  
  <p>When I log <code>this.inquiry.name</code> it is indeed <code>undefined</code>, but I'm not understanding why. What am I doing wrong?</p>