@fagnerlima/ng-mask v2.2.1

NgMask

NgMask is a jQueryMaskPlugin Adapter for Angular.

Dependencies

• @angular/core: 2.4.10 or higher;
• @angular/forms: 2.4.10 or higher;
• jQuery: 3.2.1 or higher;
• jQueryMaskPlugin: 1.14.11 or higher.

Usage

1. Install ng-mask using npm:

npm install @fagnerlima/ng-mask

2. Import NgMaskModule into Module class:

// ...
import { NgMaskModule } from '@fagnerlima/ng-mask';

@NgModule({
  imports: [
    // ...
    NgMaskModule
  ],
  // ...
})
export class AppModule { }

3. Insert the directive in form inputs with ngControl (ex. ngModel or formControlName):

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

import { Mask } from '@fagnerlima/ng-mask';

@Component({
  selector: 'app-root',
  template: `
    <h1>NgMask</h1>

    <input type="text" [(ngModel)]="money" [mask]="maskMoney" />
  `
})
export class AppComponent {

  // Masks
  readonly maskCep: string = 'brCep';
  readonly maskCoordinateLat: string = 'coordinateLat';
  readonly maskCoordinateLong: string = 'coordinateLong';
  readonly maskCpf: Mask = new Mask('000.000.000-00');
  readonly maskDecimal: string = 'decimal(10,2)';
  readonly maskInteger: string = 'integer(6)';
  readonly maskMoney: string = '#0.00?reverse=true';
  readonly maskPhone: string = '(00) 00000-0000';

  // Controls
  money: string;
}

Mask Types

Mask Object

Instance of Mask class.

import { Mask } from '@fagnerlima/ng-mask';

const dateMask: Mask = new Mask('00/00/0000');
const percentMask: Mask = new Mask('##0,00%', { reverse: true })

Default Mask

String that represents pattern attribute of Mask class, using default jokers of jQueryMaskPlugin, without extra options.

const dateMask: string = '00/00/0000';

QueryString Mask

String in the QueryString format that contains the pattern and extra options of Mask class.

const percentMask: string = '##0,00%?reverse=true&placeholder=000,00%';

Predefined Type Mask

String that contains a predefined type.

const coordinateLatMask: string = 'coordinateLat';
const coordinateLongMask: string = 'coordinateLong';

Numeric Mask

String that contains a numeric type with your precision (and scale for decimal type), similar to many databases.

const integerMask: string = 'integer(6)';
const decimalMask: string = 'decimal(10,2)';