title: AngularJS2 : Cannot read property 'form' of undefined
body: <p>I'm starting an AngularJS2 web-app, and I've started with a login component.
  I have a text input linked to a controller variable, which is also displayed in the view. However, for some reason, updating the text filed does not update the text display next to it.
  However, alert()-ing my edited variables does display the changes made.
  Here is my code :</p>
  
  <p><strong>login.component.ts :</strong></p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { ActivatedRoute, Params }   from '@angular/router';
  import { FormsModule }              from '@angular/forms';
  
  @Component({
      moduleId: module.id,
      selector: 'login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
  })
  export class LoginComponent {
  
      login: string = "test1";
      pass:  string = "test2";
  
      onSubmit(): void {
          alert("Form submit: " + this.login + this.pass);
      }
  }
  </code></pre>
  
  <p><strong>login.component.html</strong></p>
  
  <pre><code>&lt;div id="login"&gt;
  
      {{this.login}}
      {{this.pass}}
  
      &lt;form (ngSubmit)="onSubmit()"&gt;
  
          &lt;label for="form-login"&gt;Login&lt;/label&gt;
          &lt;input type="text"     class="form-input" id="form-login" name="form-login" [(ngModel)]="login"&gt;&lt;br&gt;
  
          &lt;label for="form-pass"&gt;Mot de passe&lt;/label&gt;
          &lt;input type="password" class="form-input" id="form-pass"  name="form-pass"  [(ngModel)]="pass"&gt;
  
          &lt;button type="submit" id="button-connexion" [disabled]="!heroForm.form.valid"&gt;Connexion&lt;/button&gt;
  
      &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And my header of <strong>index.html</strong> for importing scripts :</p>
  
  <pre><code>&lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
  &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
  &lt;/script&gt;
  </code></pre>
  
  <p>My console displays this error :</p>
  
  <pre><code>core.umd.js:2838 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost/app/login/login.component.html:13:46 caused by: Cannot read property 'form' of undefined
  TypeError: Cannot read property 'form' of undefined
  at CompiledTemplate.proxyViewClass.View_LoginComponent0.detectChangesInternal (/AppModule/LoginComponent/component.ngfactory.js:177:42)
  at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9355:18)
  at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9448:48)
  at CompiledTemplate.proxyViewClass.View_LoginComponent_Host0.detectChangesInternal (/AppModule/LoginComponent/host.ngfactory.js:29:19)
  at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9355:18)
  at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:9448:48)
  at ViewRef_.detectChanges (http://localhost/node_modules/@angular/core/bundles/core.umd.js:7338:24)
  at RouterOutlet.activate (http://localhost/node_modules/@angular/router/bundles/router.umd.js:3747:46)
  at ActivateRoutes.placeComponentIntoOutlet (http://localhost/node_modules/@angular/router/bundles/router.umd.js:3224:20)
  at ActivateRoutes.activateRoutes (http://localhost/node_modules/@angular/router/bundles/router.umd.js:3198:26)
  </code></pre>