Untitled

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="config.js"></script>
    <script src="https://npmcdn.com/ionic-angular@2.0.0-beta.6/bundles/ionic.system.js"></script>
  
    <link href="https://npmcdn.com/ionic-angular@2.0.0-beta.6/bundles/ionic.ios.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <!-- this Ionic's root component and where the app will load -->
    <ion-app></ion-app>
    
    <script>
      System.import('app.ts')
    </script>
  </body>

</html>

import { App, Platform } from 'ionic-angular/index';
import { TestPage } from './test.ts';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = TestPage;
  }
}

/* Styles go here */

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        //"module": "commonjs",
        //"target": "es6"
  }
});

import { Page } from 'ionic-angular/index';
import { ControlGroup, FormBuilder, FORM_DIRECTIVES, Validators } from 'angular2/common';
import { OnInit } from 'angular2/core';
import { IdNumAccessor } from './id-num-accessor.ts';

@Page({
  template: `
  <ion-content>
    <form novalidate
        [ngFormModel]="form"
        (ngSubmit)="onSubmit()">
        
        <ion-input placeholder="ion test" type="tel"
            agl-id-num
            [ngFormControl]="form.controls['ionTest']">
        </ion-input>
        
        <input placeholder="pure test" type="tel"
            agl-id-num
            [ngFormControl]="form.controls['pureTest']" />
        
        <button block type="submit">
            Submit
        </button>
    </form>
    <p>ionTest: {{form.value.ionTest}}</p>
    <p>pureTest: {{form.value.pureTest}}</p>
  </ion-content>
  `,
  directives: [ FORM_DIRECTIVES, IdNumAccessor ]
})
export class TestPage implements OnInit {
  
  form: ControlGroup;
  
  constructor(private fb: FormBuilder) { }
  
  ngOnInit() {
    this.form = this.fb.group({
      'ionTest':  ['', Validators.required],
      'pureTest': ['', Validators.required]
    });
  }
  
  onSubmit() {
    console.log(form.value);
  }

}

import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from 'angular2/common';
import { Directive, ElementRef, forwardRef, Provider, Renderer } from 'angular2/core';

const CUSTOM_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => IdNumAccessor), multi: true});

@Directive ({
  selector: '[agl-id-num]',
  host: {
    '(input)': 'doOnChange($event.target)',
    '(blur)': 'doOnBlur($event.target)'
  },
  bindings: [ CUSTOM_VALUE_ACCESSOR ]
})
export class IdNumAccessor extends DefaultValueAccessor {
  
  onChange = (_: any) => {};
  onTouched = () => {};
  
  constructor(_renderer: Renderer, _elementRef: ElementRef) {
    super(_renderer, _elementRef);
  }

  writeValue(value:any):void {
    if (value!=null) {
      super.writeValue(value);
    }
  }

  doOnChange(elt) {
    // prevent user to input non-digit characters while typing
    // and limit user input to 14 characters
    let val = elt.value
      .replace(/\D/g, '')
      .substring(0,14);
      
    // update interface
    elt.value = val;
    
    // change model
    this.onChange(val);
  }
  
  doOnBlur(elt) {
    // format field on blur
    let val = elt.value + '';
      
    if (val.length === 11) {
      elt.value = val.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
    }
    else if (val.length = 14) {
      elt.value = val.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5');
    }
  }
}