Angular2 + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.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 Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule} from '@angular/core'
import { ReactiveFormsModule, FormBuilder, Validators, FormsModule } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'
import { CustomValidators } from './custom-validators';
import { AsyncEmailValidatorDirective } from './async-email-validator.directive';
import { EmailValidatorDirective } from './email-validator.directive';
import { CounterComponent } from './custom-form-control.component';

@Component({
  selector: 'my-app',
  styles: ['div.error { color: red }'],
  template: `
    <h2>Hello {{name}}</h2>
    <div id="form-1">
      <form [formGroup]="form" novalidate>
        <div class="error" *ngIf="invalidStreet"> Please enter a valid address </div>
        <label> Street
          <input type="text" formControlName="street">
        </label><br>
        <div class="error" *ngIf="invalidPostcode"> Please enter a valid post code </div>
        <div *ngIf="pendingPostcode">Pending ...</div>
        <label> Post code
          <input type="text" formControlName="postcode">
        </label>
        <div counter formControlName="counter"></div>
      </form>
      <div class="error" *ngIf="invalidForm">Please fix the input data</div>
      <button (click)="onSubmit()" [disabled]="invalidForm">Submit</button><br>
      Form value: {{ form.value | json }}<br>
      Form valid: {{ !form.invalid }}
    </div>
    <div id="form-2" novalidate>
      <form #f="ngForm">
        <div *ngIf="email.pending">Pending ...</div>
        <label>
          Email:
          <input asyncEmailValidator ngModel #email="ngModel" name="email" type="email">
          <input ngModel emailValidator #email2="ngModel" name="email2" type="email">
          <div counter [ngModel]="5" name="my-counter"></div>
        </label>
        <div *ngIf="!email2.valid">EMAIL2 is not equal to test</div>
      </form>
      Form value: {{ f.value | json }}<br>
      Form valid: {{ !f.invalid }}
    </div>
  `,
})
export class App {
  name:string;
  form;
  constructor(private fb: FormBuilder) {
    this.name = 'Angular2'
    this.form = fb.group({
      street: ['', [Validators.required, Validators.minLength(3)]],
      postcode: [0, [], [CustomValidators.AsyncPostcodeValidation()]],
      counter: [10]
    })
  }
  
  get invalidStreet() {
    return !this.form.get('street').valid; 
  }
  
  get invalidPostcode() {
    return !this.form.get('postcode').valid;
  }
  
  get invalidForm() {
    return this.form.invalid;
  }
  
  get pendingPostcode() {
    return this.form.get('postcode').pending;
  }
  
  onSubmit() {
    console.log(this.form.value);
  }
}

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule, FormsModule ],
  declarations: [ App, AsyncEmailValidatorDirective, EmailValidatorDirective, CounterComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

import { ValidatorFn, AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/catch';

export class CustomValidators {
  static PostcodeValidation(num: number = 1000): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      const val = control.value;
      if(val && val > num) return null; // no error
      return { 'Invalid Post Code': val }; // not valid
    }
  }
  
  static AsyncPostcodeValidation(num: number = 1000): AsyncValidatorFn {
    return (control: AbstractControl): Promise<{[key: string]: any}>|Observable<{[key: string]: any}> => {
      const val = control.value;
      const result = (val && val > num) ? null: { 'Invalid Post Code': val }
      return Observable.of(result).delay(5000);
    }
  }
}

import { Directive, forwardRef } from '@angular/core';
import { NG_ASYNC_VALIDATORS, AsyncValidatorFn, AbstractControl } from '@angular/forms';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';


export const asyncEmailValidatorProvider = {
  provide: NG_ASYNC_VALIDATORS, 
  useExisting: forwardRef(() => AsyncEmailValidatorDirective),
  multi: true
};

@Directive({
  selector: '[asyncEmailValidator][ngModel]',
  providers: [ asyncEmailValidatorProvider ]
})
export class AsyncEmailValidatorDirective {
  validate(control: AbstractControl):Promise<{[key: string]: any}>|Observable<{[key: string]: any}> {
    return Observable.of({ 'Email validation' : false }).delay(2000);
  }
}

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, AsyncValidatorFn, AbstractControl } from '@angular/forms';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';


export const emailValidatorProvider = {
  provide: NG_VALIDATORS, 
  useExisting: forwardRef(() => EmailValidatorDirective),
  multi: true
};

@Directive({
  selector: '[emailValidator]',
  providers: [ emailValidatorProvider ]
})
export class EmailValidatorDirective {
  validate(control: AbstractControl):{[key: string]: any} {
    return control.value === 'test' ? null : { 'Email validation' : false });
  }
}

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: '[counter]',
  template: `
  <div id="counter-value">
    {{counter}}
  </div>
  <button (click)="increaseCounter()">+</button>
  <button (click)="decreaseCounter()">-</button>
  `,
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CounterComponent),
      multi: true
    }
  ]
}) export class CounterComponent implements ControlValueAccessor {
  counter: number;
  propagateChange: any;
  propagateTouch: any;
  isDisabled: boolean;
  
  @Input() set value(val: number) {
    this.counter = val;
  };
  
  writeValue(value: number): void {
    // from controller to control when using ngModel
    if (!value) return;
    this.counter = value;
  }

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
    fn(this.counter);
  }
  
  registerOnTouched(fn: any): void {
    this.propagateTouch = fn;
  }
  
  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }
  
  increaseCounter() {
    this.counter++;
    this.propagateChange(this.counter);
  }
  
  decreaseCounter() {
    this.counter--;
    this.propagateChange(this.counter);
  }
}