angular2-input-text-mask

Angular 2 Input Mask

🚧 This Angular 2 directive. That adds mask to input elements. Added supports for usage with angular2 forms

Getting started

First, install it.

npm i angular2-input-text-mask --save

Then, require it and use it:

import {bootstrap} from '@angular/platform-browser-dynamic'
import {Component} from '@angular/core';
import MaskedInput from 'angular2-input-text-mask'

@Component({
  selector: 'app',
  templateUrl: `
    <input [textMask]="{mask: mask}" [(ngModel)]="myModel" type="text"/>
    With Angular 2 forms
    <input [textMask]="{mask: mask}" formControlName="phone" type="text"/>
  `,
  directives: [MaskedInput]
})
export class AppComponent {
  public myModel = ''
  public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
}

bootstrap(AppComponent);

Documentation

As you can see in the code above, you are passing an object to the textMask directive.

For more information about the values that the textMask object accepts, see the documentation here.

License

Public domain - CC0 1.0 Universal