Skip to content

digitalmedia34/ngx-mask

 
 

Repository files navigation

Installing

$ npm install --save ngx-mask

Quickstart

Import ngx-mask module in Angular app.

import {NgxMaskModule} from 'ngx-mask'

(...)

@NgModule({
  (...)
  imports: [
    NgxMaskModule.forRoot(options)
  ]
  (...)
})

Then, just define masks in inputs.

Usage

<input type='text' mask='{here comes your mask}' >

Examples

mask example
9999-99-99 2017-04-15
000.000.000-99 048.457.987-98
AAAA 0F6g
SSSS asDF

Mask Options

You can define your custom options for all directives (as object in the mask module) or for each (as attributes for directive)

specialCharacters (string[ ])

We have next default characters:

character
/
(
)
.
:
-
space
+
Usage
<input type='text' specialCharacters="[ '[' ,']' , '*' ]" mask="[00]*[000]" >
Then:
Input value: 789-874.98
Masked value: [78]*[987]

patterns ({ [character: string]: { pattern: RegExp, optional?: boolean})

We have next default patterns:

code meaning
0 digits (like 0 to 9 numbers)
9 digits (like 0 to 9 numbers), but optional
A letters (uppercase or lowercase) and digits
S only letters (uppercase or lowercase)
Usage:
<input type='text' patterns="{'0': { pattern: new RegExp('\[a-zA-Z\]')}}" mask="(000-000)" >
Then:
Input value: 789HelloWorld
Masked value: (Hel-loW)

dropSpecialCharacters (boolean)

You can choose if mask will drop special character in the model, or not, default value true

Usage
<input type='text' dropSpecialCharacters="false" mask="000-000.00" >
Then:
Input value: 789-874.98
Model value: 789-874.98

clearIfNotMatch (boolean)

You can choose clear the input if the input value not match the mask, default value false

Examples

Check the demo.

About

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 46.9%
  • JavaScript 34.9%
  • HTML 14.4%
  • CSS 3.8%