Angular 2 forms with nested components

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" 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.17/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>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

/* Styles go here */

### Angular 2 nested form component validation
If you want to create custom form components there are some gotchas.

If you try putting an `ngControl` inside a component it will complain it can't find it's form with a `template parse error`

```
No provider for ControlContainer
```

System.config({
  meta: { 'src/customer.model.ts': { format: 'es6' }},
  //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",
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    '@angular/core': {
      main: 'core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'platform-browser.umd.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
// Import probe, so that we can debug
import {ELEMENT_PROBE_PROVIDERS} from '@angular/platform-browser';
import {App} from './app';

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

//our root app component
import {Component} from '@angular/core'
import {FORM_PROVIDERS} from '@angular/common'
import {Address, Customer} from './customer.model';
import {AddressComponent} from './address.component';

@Component({
  selector: 'my-app',
  providers: [
    FORM_PROVIDERS
  ],
  directives: [
    AddressComponent
  ],
  template: `
    <div class="container">
      <form (ngSubmit)="onSubmit(customer)" #form="ngForm">
        <div class="text-center">
          <h2>Hello {{customer.name}}</h2>
        </div>
        
        <fieldset class="form-group">
          <label for="name">Name</label>
          <input id="name" class="form-control" [(ngModel)]="customer.name" required />
        </fieldset>
        
        <div class="row">
          <div class="col-sm-6">
            <div class="panel panel-default">
              <div class="panel-heading">Address</div>
              <div class="panel-body">
                <lr-address ngControlGroup="address" [address]="customer.address"></lr-address>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="panel panel-default">
              <div class="panel-heading">Billing Address</div>
              <div class="panel-body">
                <lr-address ngControlGroup="billingAddress" [address]="customer.billingAddress"></lr-address>
              </div>
            </div>
          </div>
        </div>
            
        <div class="text-center">
          <button class="btn btn-primary btn-lg" type="submit" [disabled]="!form.valid">Submit</button>
        </div>
        
        <br />
        <pre>
          Valid: {{form.valid}}
        </pre>
      </form>
    </div>
  `
})
export class App {
  
  customer: Customer;
  
  constructor() {
    this.customer = {
      name: 'My Customer',
      address: {
        street: 'Main St',
        zipCode: '1234',
        city: 'Stockholm'
      },
      billingAddress: {
        street: 'Main St',
        zipCode: '4321',
        city: 'Stockholm'
      }
    }
  }
  
  onSubmit(customer: Customer) {
    console.log(customer);
  }
}

export interface Address {
  street: string;
  zipCode: string;
  city: string;
}

export interface Customer {
  name: string;
  address: Address;
  billingAddress: Address;
}

import {provide, forwardRef, Component, OnInit, OnDestroy, Input, Host, SkipSelf} from '@angular/core';
import {ControlComponent, ControlContainer, NgControlGroup, controlPath} from '@angular/common';
import {Address} from './customer.model';

@Component({
  selector: 'lr-address',
  provider: [
    provide(ControlContainer, { useExisting: forwardRef(() => NgControlGroup) })
  ],
  template: `
    
    <fieldset class="form-group">
      <label for="street">Street</label>
      <input
        id="street"
        class="form-control"
        type="text"
        [(ngModel)]="address.street"
      />
    </fieldset>
    
    <div class="row">
      <div class="col-xs-6">
        <fieldset class="form-group">
          <label for="zipCode">ZipCode</label>
          <input
            id="zipCode"
            class="form-control"
            type="text"
            required
            min-length="4"
            [(ngModel)]="address.zipCode"
          />
        </fieldset>
      </div>
      <div class="col-xs-6">
        <fieldset class="form-group">
          <label for="city">City</label>
          <input
            id="city"
            class="form-control"
            type="text"
            required
            [(ngModel)]="address.city"
          />
        </fieldset>
      </div>
    </div>
  `
})
export class AddressComponent implements OnInit, OnDestroy {

  @Input() address: Address;

  constructor(@Host() @SkipSelf() private parent: ControlContainer) {}
  
  ngOnInit(): void {
    //this.formDirective.addControlGroup(this);
  }

  ngOnDestroy(): void {
    //this.formDirective.removeControlGroup(this);
  }

  get formDirective(): Form { return this.parent.formDirective; }

}