Angular2 gridlike form

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <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>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

.ng-valid[required] {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid {
  border-left: 5px solid #a94442; /* red */
}

### Angular2 Starter Plunker - Typescript - Beta 0

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

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 {App} from './app';

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

//our root app component
import {Component} from 'angular2/core';
import {Contact} from './contact';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-contact></my-contact>
    </div>
  `,
  directives: [Contact]
})
export class App {
  constructor() {
    console.log("App loaded");
    this.name = 'Angular2';
  }
}

import {Component, EventEmitter} from 'angular2/core'
import {FORM_DIRECTIVES,FormBuilder,ControlGroup,Control,AbstractControl,Validators} from "angular2/common";
import {Entry,IEntry} from "./entry";

export interface IContact {
  name: string;
}

@Component({
  selector: 'my-contact',
  providers: [],
  template: `
    <div>
      <form [ngFormModel]="contactForm"
            (ngSubmit)="submit(contactForm.value)"
            role="form">
          
          <div class="form-group">
            <label for="name">name</label>
            <input type="text" id="name"
                   maxlength="100" required
                   class="form-control"
                   placeholder="name"
                   [ngFormControl]="contactForm.controls['name']">
             <div *ngIf="name.hasError('required') && name.touched"
                  class="text-danger small">name required</div>
          </div>
          
          <div class="form-group">
            <table class="table table-bordered">
            <tbody>
            <tr *ngFor="#e of entries">
              <td>
                <my-entry [entry]="e"></my-entry>
              </td>
            </tr>
            </tbody>
            
            </table>
          </div>
          <button class="btn btn-primary" type="submit">submit</button>
      </form>
    </div>
  `,
  directives: [FORM_DIRECTIVES, Entry],
  outputs: [
    "contactUpdated"
  ]
})
export class Contact {
  public contactForm: ControlGroup;
  public name: AbstractControl;
  public entries: IEntry[];
  public contactUpdated: EventEmitter<IContact>;

  constructor(private formBuilder:FormBuilder) {
    console.log("Contact loaded");
    this.contactUpdated = new EventEmitter<IContact>();

    this.contactForm = this.formBuilder.group({
            "name": ["", Validators.required]
        });
    this.name = this.contactForm.controls["name"];
        
    this.entries = [
      { address: "12 Street", zip: "123"},
      { address: "34 Street", zip: "456"}
    ];
  }
  
  public submit(value) {
    console.log(JSON.stringify(value));
  }
}

import {Component, EventEmitter} from 'angular2/core'
import {FORM_DIRECTIVES,FormBuilder,ControlGroup,Control,AbstractControl,Validators} from "angular2/common";

export interface IEntry {
  address: string;
  zip: string;
}

@Component({
  selector: 'my-entry',
  providers: [],
  template: `
    <div>
      <form class="form-inline"
            role="form">
          
          <div class="form-group">
            <input type="text"
                   maxlength="100" required
                   class="form-control"
                   placeholder="address"
                   [(ngModel)]="entry.address"
                   ngControl="address">
          </div>

          <div class="form-group">
            <input type="text" 
                   maxlength="20"
                   class="form-control"
                   placeholder="zip"
                   [(ngModel)]="entry.zip"
                   ngControl="zip">
          </div>
      </form>
    </div>
  `,
  directives: [FORM_DIRECTIVES],
  inputs: [
    "entry"
  ]
})
export class Entry {
  public entry: IEntry;
  
  constructor() {
    console.log("Entry loaded");
  }
}