Angular2 FormBuilder and nested object property returns undefined
<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>