title: Can't Access Angular 2 Properties Inside of Controller
body: <p>I am new to angular and i'm having trouble binding data from a data service to FormGroup.  I am able to access the properties in the view just fine but the same properties are undefined inside the controller where I try to create the form group and set it's initial form control values.</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>export class Dog {
    constructor(
      id: number,
      name: string,
      age: number
    ) { }
  }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>getDog(): Promise&lt;Dog&gt; {
    return this.http.get(this.baseUrl + '/api/endpoint').toPromise().then(res.json()); 
  }
  </code></pre>
  
  <p><strong>Component</strong>
  I then call this service from my component like:</p>
  
  <pre><code>export class DogComponent implements OnInit {
    form: FormGroup;
    dog: Dog;
  
    constructor(private service: DogService, private fb: FormBuilder) { }
  
    ngOnInit(): void {
      this.getData();
      this.createForm();
    }
  
    getData() {
      this.service.getDog().then(res =&gt; this.dog = res);
    }
  
    createForm() {
      this.form = this.fb.group({
        id: [this.dog.id],
        name: [this.dog.name],
        age: [this.dog.age]
      });
    }
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
    &lt;input formControlName="name" /&gt;
    &lt;input formControlName="age" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I am able to set the input value like [value]="name" but I want to be able to set those in the createForm method. Any ideas why the properties are available to the view but not inside the controller</p>