Angular2 Simple Form

<!DOCTYPE html>
<html>

  <head>
    <title>Anglar2 + TypeScript Starter</title>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.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-alpha.42/angular2.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

### Angular2 Starter Plunker - Typescript - Alpha .42

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, and DI usage.

console.clear();

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    app: "./src"
  },
  packages: {
    app: {
      main: './app.ts',
      defaultExtension: 'ts'
    }
  }
});

import {bootstrap, Component} from 'angular2/angular2';
import {DemoForm} from './form';
//import {FormBuilder, ControlGroup} from "angular2/angular2";

@Component({
  selector: 'my-app',
  template: `
    <demo-form></demo-form>
  `,
  directives:[DemoForm]
})
class AppComponent {
  constructor(){}
}

bootstrap(AppComponent,[]);

import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({  
  selector: 'demo-form'
})
@View({
  directives: [FORM_DIRECTIVES],
  template: `
  <div>
    <form #f="form" (submit)="onSubmit(f)">
      <div class="form-group">
        <label for="id">id</label>
        <input type="text" class="form-control" ng-control="id" placeholder="id" required>
      </div>
      
      <div class="form-group">
        <label for="name">name</label>
        <input type="text" class="form-control" ng-control="name" placeholder="name" required>
      </div>
 
      <button type="submit" class="btn btn-default" [disabled]="!f.valid">Submit</button>
    </form>
    <hr>
    submitted : {{submitted|json}}
  </div>  
  `
})
export class DemoForm {
  private submitted:object = {};
  onSubmit(f) {
    this.submitted = f.value;
  }
}