Angular2 FormBuilder & Validation Example

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <login-page>
      loading...
    </login-page>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - Beta 0

A login form that uses angular2/common/FormBuilder for basic validation.
- Uses SystemJS + TypeScript to compile on the fly

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {LoginPage} from './login-page';

bootstrap(LoginPage, [])
  .catch(err => console.error(err));

import { Component } from 'angular2/core'
import { FORM_DIRECTIVES, FormBuilder, Validators } from 'angular2/common';

@Component({
  selector: 'login-page',
  directives: [FORM_DIRECTIVES],
  templateUrl: 'src/login-page.html'
})
export class LoginPage {
  constructor(fb: FormBuilder) {
    this.loginForm = fb.group({
      email: ["", Validators.required],
      password: ["", Validators.required]
    });
  }
  doLogin(event) {
    console.log(this.loginForm.value);
    event.preventDefault();
  }
}

<form [ngFormModel]="loginForm" (submit)="doLogin($event)">
  <input ngControl="email" type="email" placeholder="Your email">
  <input ngControl="password" type="password" placeholder="Your password">
  <button type="submit">Log in</button>
</form>
<div *ngIf="!loginForm.valid" class="ui error message">Form is invalid - required fields not completed</div>