title: Angular 2 - Example Code - Defined Model Property Undefined
body: <p>Trying to follow this example of hooking up a form from the Angular 2 tutorials. I'm adapting the code for a login page.
  <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="nofollow">https://angular.io/docs/ts/latest/guide/forms.html</a></p>
  
  <p>Here is my model,</p>
  
  <pre><code>export class LoginModel {
    constructor(
        public id: number,
        public password: string
    ) {}
  }
  </code></pre>
  
  <p>Here is my component,</p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  
  import { LoginModel } from "../Models/login.model";
  
  @Component({
     selector: "login-form",
     templateUrl: "views/login.component.html",
  })
  export class LoginComponent implements OnInit {
     model = new LoginModel(111, "true");
     submitted = false;
  
     ngOnInit() {
        this.model.id = 111;
        this.model.password = "true";
     }
  
     onSubmit(): void {
         this.submitted = true;
     }
  
     // remove - used for debugging
     get diagnostic(): string {
         return "HERE: " + JSON.stringify(this.model);
     }
  }
  </code></pre>
  
  <p>OnInit in the component is probably not needed, just thought I would give it a try.</p>
  
  <p>Finally here is my HTML,</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h1&gt;Login Form&lt;/h1&gt;
  {{diagnostic}}
  &lt;form *ngIf="model"&gt;
      &lt;div class="form-group col-md-6"&gt;
          &lt;label for="id"&gt;User ID:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="id" name="id"
              required
              [(ngModel)]="model.id"
          &gt;
      &lt;/div&gt;
      &lt;div class="form-group col-md-6"&gt;
          &lt;label for="password"&gt;Password&lt;/label&gt;
          &lt;input type="text" class="form-control" id="password" name="password"
              required
              [(ngModel)]="model.password"       
          &gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>The error I keep running into is that "model.id" is undefined. To verify this I added *ngIf="model". I'm not sure why the model is showing as undefined here when it is defined in the LoginComponent which is imported through my module. </p>
  
  <p>Any help would be greatly appreciated I've been stuck on this bit for a while and haven't been able to find anything helpful scouring the web.</p>