Angular2 + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <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 class="container">
    <app>loading...</app>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - RC.0

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

For opening

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.module';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component} from '@angular/core'

@Component({
  selector: 'app',
  template: `
  <h2>Form</h2>
  <app-form></app-form>
  `,
})
export class AppComponent { }

import {Component, OnInit} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';

import {MQValidators} from './MQValidators';

@Component({
    selector: 'app-form',
    templateUrl: 'src/form.component.html'
})
export class FormComponent implements OnInit {

    form: FormGroup;

    ageControl;

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.buildForm();
    }

    buildForm () {

        this.form = this._fb.group({
            'age': ['', [
                Validators.required,
                Validators.pattern('[0-9]*'),
                MQValidators.age(90, 'abnormalAge', false),
                MQValidators.age(120, 'incredibleAge', true)
            ]]
        });

        this.form.valueChanges
            .subscribe(data => this.onValueChanged(data));

        this.onValueChanged();
    }
    
    onSubmit() {
    }

    onValueChanged(data?: any): void {
        if (!this.form) { return; }
        const form = this.form;

        for (const field in this.formErrors) {
            this.formErrors[field] = '';
            const control = form.get(field);

            if (control && control.dirty && !control.valid) {
                const messages = this.validationMessages[field];

                for (const key in control.errors) {
                    this.formErrors[field] = messages[key];
                }
            }
        }
    }

    formErrors = {
        age: ''
    }

    validationMessages = {
        'age': {
            'required': 'age is required.',
            'pattern': 'age should be integer.',
            'abnormalAge': 'age higher than 90 is abnormal !!!',
            'incredibleAge': 'age higher than 120 is incredible !!!'
        }
    }

}

import {NgModule} from '@angular/core';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {FormComponent} from './form.component';



const Components = [ AppComponent, FormComponent ];

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ ...Components ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
  <div class="form-group">
    <label for="age" class="control-label">Age:</label>
    <input formControlName="age"
           type="number"
           name="age"
           id="age"
           class="form-control"
           required>
    <div *ngIf="formErrors.age"> <p>{{ formErrors.age }}</p> </div>
  </div>
  
  <button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>

import {ValidatorFn, AbstractControl} from '@angular/forms';

function isEmptyInputValue(value: any) {
  return value == null || typeof value === 'string' && value.length === 0;
}

export class MQValidators {
    static age(max: number, validatorName: string = 'age', blockSubmit: boolean = true): ValidatorFn {
        return (control: AbstractControl): {[key: string]: any} => {
            
            if (isEmptyInputValue(control.value)) return null;
            const value = typeof control.value == 'number' ? control.value : parseInt(control.value);
          
            if (isNaN(value)) return null;
          
            if (value <= max) return null;
            
          
            let result = {};
            result[validatorName] = {valid: false};
        
            return result;
        }
    }
  
}