How To Use

Add ngMask plugin after your AngularJS.

<script src="angular.min.js"></script>
<script src='ngMask.min.js'></script>
Add ngMask module dependency to your app.

angular.module('yourApp', ['ngMask']);
Use the avaiable patterns to create your mask. Set the mask as input attribute.
<input type='text' ng-model='maskModel' mask='39/19/9999' /> "/" isn't a pattern. It's considered a divisor. Every divisor is automatically written by ngMask. Check all available patterns here.
Adjust your mask options.
<input type='text' ng-model='maskModel ng-value='0/3/9' mask='3/9?' mask-repeat='2' mask-restrict='accept' mask-clean='true' mask-validate='false' mask-limit='false' /> Generated mask '3/9?3/9?'. Check all available options here.

Avaiable Patterns

You can make your mask using some patterns available. If you use a pattern not specified below to construct your mask, It'll be considered a divisor. A dividor is a character used to group semantic elements, for example: "/" in dates to separate days, months and years, "-" in SSN to separate area, group and serial numbers or "." in IPv4 to create 4 groups of 8 bits.

Common Patterns

'*' => /./ Any single character
'w' => /\w/ Any word character (letter, number, underscore)
'W' => /\W/ Any non-word character
'd' => /\d/ Any digit
'D' => /\D/ Any non-digit
's' => /\s/ Any whitespace character
'S' => /\S/ Any non-whitespace character
'b' => /\b/ Any word boundary

Number Patterns

'9' => /[0-9]/ Valid numbers: 0,1,2,3,4,5,6,7,8,9
'8' => /[0-8]/ Valid numbers: 0,1,2,3,4,5,6,7,8
'7' => /[0-7]/ Valid numbers: 0,1,2,3,4,5,6,7
'6' => /[0-6]/ Valid numbers: 0,1,2,3,4,5,6
'5' => /[0-5]/ Valid numbers: 0,1,2,3,4,5
'4' => /[0-4]/ Valid numbers: 0,1,2,3,4
'3' => /[0-3]/ Valid numbers: 0,1,2,3
'2' => /[0-2]/ Valid numbers: 0,1,2
'1' => /[0-1]/ Valid numbers: 0,1
'0' => /[0]/ Valid numbers: 0

Extra Patterns

'?' => /?/ Optional character. It makes the previous pattern optional.
'A' => /[A-Z]/ Any uppercase alphabet letter without accents
'a' => /[a-z]/ Any lowercase alphabet letter without accents
'Z' => /[A-ZÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/ Any uppercase alphabet letter with accents
'z' => /[a-zçáàãâéèêẽíìĩîóòôõúùũüû]/ Any lowercase alphabet letter with accents
'@' => /[a-zA-Z]/ Any alphabet letter without accents
'#' => /[a-zA-ZçáàãâéèêẽíìĩîóòôõúùũüûÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/ Any alphabet letter with accents
'%' => /[0-9a-zA-zçáàãâéèêẽíìĩîóòôõúùũüûÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/ Any digit and alphabet letter with accents

NgModel (required): model object
Attribute 'ng-model'
The model of input.
Mask (required): mask definition
Attribute 'mask'
The mask for input.
NgValue: initial mask value (default: undefined)
Attribute 'ng-value'
The initial value of input.
Restrict: 'select', 'reject' or 'accept' (default: select)
Attribute 'mask-restrict' or 'restrict'
The way how ngMask will interact with user input. Select restriction: The input will show the char inputted even on error cases. If it has errors, the wrong char will be selected. Reject restriction: The input will show the char inputted on successfull cases. If it has errors, the wrong char will be rejected. Accept restriction: The input will always show the char inputted. No matter it's right or wrong.
Repeat: number - repeat mask n times (default: undefined)
Attribute 'mask-repeat' or 'repeat'
Repeats the mask attribute the defined times.
Clean: 'true' or 'false' (default: false)
Attribute 'mask-clean' or 'clean'
Cleans model value. Removes divisors from model value.
Validate: 'true' or 'false' (default: true)
Attribute 'mask-validate' or 'validate'
Applies validation. Uses form controller setValidity method.
Limit: 'true' or 'false' (default: true)
Attribute 'mask-limit' or 'limit'
Limits the max length inputted according with mask.

Date example

MASK: 39/19/9999

Model: {{date}}

Field Error: {{form.date.$error}}

Field Valid: {{form.date.$valid}}


            <input type="text" name="date"
                 mask="39/19/9999"
                 ng-model="date">

MASK: 39/19/9999 CLEAN: TRUE

Model: {{date1}}

Field Error: {{form.date1.$error}}

Field Valid: {{form.date1.$valid}}


            <input type="text" name="date1"
                 mask="39/19/9999"
                 clean="true"
                 ng-model="date1">

MASK: 39/19/9999 CLEAN: FALSE

Model: {{date2}}

Field Error: {{form.date2.$error}}

Field Valid: {{form.date2.$valid}}


            <input type="text" name="date2"
                 mask="39/19/9999"
                 clean="false"
                 ng-model="date2">

MASK: 19/39/9999 RESTRICT: REJECT

Model: {{date4}}

Field Error: {{form.date4.$error}}

Field Valid: {{form.date4.$valid}}


            <input type="text" name="date"
                 mask="19/39/9999"
                 restrict="reject"
                 ng-model="date4">

MASK: 19/39/9999 RESTRICT: REJECT CLEAN: TRUE

Model: {{date5}}

Field Error: {{form.date5.$error}}

Field Valid: {{form.date5.$valid}}


            <input type="text" name="date5"
                 mask="19/39/9999"
                 restrict="reject"
                 clean="true"
                 ng-model="date5">

MASK: 19/39/9999 RESTRICT: ACCEPT CLEAN: TRUE

Model: {{date6}}

Field Error: {{form.date6.$error}}

Field Valid: {{form.date6.$valid}}


            <input type="text" name="date6"
                 mask="19/39/9999"
                 restrict="accept"
                 clean="true"
                 ng-model="date6">

Phone example

MASK: (999) 999-9999 CLEAN: TRUE

Model: {{phone}}

Field Error: {{form.phone.$error}}

Field Valid: {{form.phone.$valid}}


            <input type="text" name="phone"
                 mask="(999) 999-9999"
                 clean="true"
                 ng-model="phone">

MASK: (99) 9?9999-9999

Model: {{phone2}}

Field Error: {{form.phone2.$error}}

Field Valid: {{form.phone2.$valid}}


            <input type="text" name="phone2"
                 mask="(99) 9?9999-9999"
                 ng-model="phone2">

MASK: +99 99 9?9999-9999 RESTRICT: REJECT

Model: {{phone3}}

Field Error: {{form.phone3.$error}}

Field Valid: {{form.phone3.$valid}}


            <input type="text" name="phone3"
                 mask="+99 99 9?9999-9999"
                 restrict="reject"
                 ng-model="phone3">

String example

MASK: % REPEAT: 30 RESTRICT: REJECT

Model: {{name0}}

Field Error: {{form.name0.$error}}

Field Valid: {{form.name0.$valid}}


            <input type="text" name="name0"
                 mask="%"
                 repeat="30"
                 restrict="reject"
                 ng-model="name0">

MASK: @ REPEAT: 15

Model: {{name2}}

Field Error: {{form.name2.$error}}

Field Valid: {{form.name2.$valid}}


            <input type="text" name="name2"
                 mask="@"
                 repeat="15"
                 ng-model="name2">

MASK: w?s? REPEAT: 10 RESTRICT: REJECT VALIDATE: FALSE

Model: {{name3}}

Field Error: {{form.name3.$error}}

Field Valid: {{form.name3.$valid}}


            <input type="text" name="name3"
                 mask="w?s?"
                 repeat="10"
                 restrict="reject"
                 validate="false"
                 ng-model="name3">

IPv4 example

MASK: 95?5?.95?5?.95?5?.95?5?

Model: {{ip}}

Field Error: {{form.ip.$error}}

Field Valid: {{form.ip.$valid}}


            <input type="text" name="ip"
                 mask="95?5?.95?5?.95?5?.95?5?"
                 ng-model="ip">

MASK: 95?5?.? REPEAT: 4 CLEAN: TRUE

Model: {{ip2}}

Field Error: {{form.ip2.$error}}

Field Valid: {{form.ip2.$valid}}


            <input type="text" name="ip2"
                 mask="95?5?"
                 repeat="4"
                 clean="true"
                 ng-model="ip2">

MASK: 255.255.255.255

Model: {{ip3}}

Field Error: {{form.ip3.$error}}

Field Valid: {{form.ip3.$valid}}


            <input type="text" name="ip3"
                 mask="255.255.255.255"
                 ng-model="ip3">

CPF example

MASK: 999.999.999-99

Model: {{cpf1}}

Field Error: {{form.cpf1.$error}}


            <input type="text" name="cpf1"
                 mask="999.999.999-99"
                 ng-model="cpf1">

MASK: 999.999.999-99 CLEAN: TRUE

Model: {{cpf3}}

Field Error: {{form.cpf3.$error}}


            <input type="text" name="cpf3"
                 mask="999.999.999-99"
                 clean="true"
                 ng-model="cpf3">

MASK: 999.999.999-99 CLEAN: FALSE

Model: {{cpf2}}

Field Error: {{form.cpf2.$error}}


            <input type="text" name="cpf2"
                 mask="999.999.999-99"
                 clean="false"
                 ng-model="cpf2">

Numbers example

MASK: 123?4? RESTRICT: REJECT LIMIT: FALSE

Model: {{optional}}

Field Error: {{form.optional.$error}}

Field Valid: {{form.optional.$valid}}


            <input type="text" name="optional"
                 mask="123?4?"
                 restrict="reject"
                 limit="false"
                 ng-model="optional">

MASK: 9 REPEAT: 5

Model: {{repeat}}

Field Error: {{form.repeat.$error}}

Field Valid: {{form.repeat.$valid}}


            <input type="text" name="repeat"
                 mask="9"
                 repeat="5"
                 ng-model="repeat">

MASK: 99999

Model: {{dontrepeat}}

Field Error: {{form.dontrepeat.$error}}

Field Valid: {{form.dontrepeat.$valid}}


            <input type="text" name="dontrepeat"
                 mask="99999"
                 ng-model="dontrepeat">

Default value example

MASK: 39/19/9999

Model: {{dateDefault}}

Field Error: {{form.dateDefault.$error}}


            <input type="text" name="dateDefault"
                 mask="39/19/9999"
                 ng-value="30/09/1986"
                 ng-model="dateDefault">

MASK: 999.999.999-99 CLEAN: FALSE

Model: {{cpfDefault}}

Field Error: {{form.cpfDefault.$error}}


            <input type="text" name="cpfDefault"
                 mask="999.999.999-99"
                 clean="false"
                 ng-value="a8799900105"
                 ng-model="cpfDefault">