Mask for an Input

Question

Is it possible to have model-driven form in Angular 2 and implement a directive that would allow to mask an input field like a phone number entry [phone]?

Answer 1

I do this using the TextMaskModule from 'angular2-text-mask'

Mine are split but you can get the idea

Package using NPM NodeJS

"dependencies": {
    "angular2-text-mask": "8.0.0",

HTML

<input *ngIf="column?.type =='areaCode'" type="text" [textMask]="{mask: areaCodeMask}" [(ngModel)]="areaCodeModel">


<input *ngIf="column?.type =='phone'" type="text" [textMask]="{mask: phoneMask}" [(ngModel)]="phoneModel"> 

Inside Component

public areaCodeModel = '';
public areaCodeMask = ['(', /[1-9]/, /\d/, /\d/, ')'];

public phoneModel = '';
public phoneMask = [/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

Answer 2

No need to reinvent the wheel! Use Currency Mask, unlike TextMaskModule, this one works with number input type and it's super easy to configure. I found when I made my own directive, I had to keep converting between number and string to do calculations. Save yourself the time. Here's the link:

https://github.com/cesarrew/ng2-currency-mask