Opinionated angular input masks. Provides ready to use masks with little (br/inscricao-estadual) to no configuration (number, cnpj, etc).

• angular-input-masks@~2: angular@~1.3 and ECMAScript 5 compliant browsers (however CI only tests chrome and firefox).
• angular-input-masks@~1: angular@~1.2

The lib may be compatible with angular@~1.4, however it is not tested against that version.

With Bower:

bower install --save angular-input-masks

With npm:

npm install --save angular-input-masks

1. Import the angular-input-masks-standalone.min.js script in your page. For example:

<script src="angular-input-masks-standalone.min.js"></script>

Obs: for npm the build scripts are available inside releases folder.

2. Include the module name ui.utils.masks in your angular app. For example:

angular.module('app', ['ui.utils.masks']);

angular.module('demo', [require('angular-input-masks')]);

Some masks are internationalized, so you need to include the proper angular-locale in your app(see: https://docs.angularjs.org/guide/i18n ).

• Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
number
" 
ui-number-mask
>

• Define the number of decimals (default is 2):

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
number
" 
ui-number-mask
="
3
"
>

• Allow negative numbers using the ui-negative-number attribute:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
number
" 
ui-number-mask
="
4
" 
ui-negative-number
>

• Support to the min , max and ui-hide-group-sep attributes.

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
number
" 
ui-number-mask
 min
="
10.1
" 
max
="
100.9
"
>

<!-- Use 'ui-hide-group-sep' attribute if you don't want show the thousands separators-->

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
number
" 
ui-number-mask
 ui-hide-group-sep
>

• Internationalized: Used the decimal separator and the thousands separator defined in the client browser configuration.

• Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
percentage
" 
ui-percentage-mask
>

• You can set the number of decimals (default is 2):

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
percentage
" 
ui-percentage-mask
="
4
"
>

• The $modelValue is the $viewValue / 100, so $viewValue - 100% = $modelValue - 1

• You can use the same value in $modelValue and $viewValue using ui-percentage-value :

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
percentage
" 
ui-percentage-mask
 ui-percentage-value
>

• Support to the min , max and ui-hide-group-sep attributes.

• Internationalized: Used the decimal separator and thousands separator defined in the client browser configuration.

• The $modelValue is the $viewValue / 100, so $viewValue - 100% = $modelValue - 1

• Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
money
" 
ui-money-mask
>

• Define the number of decimals (default is 2):

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
money
" 
ui-money-mask
="
3
"
>

• Support to the min , max and ui-hide-group-sep attributes.

• Internationalized: Used the currency symbol, decimal separator and thousands separator defined in the client browser configuration.

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
phoneNumber
" 
ui-br-phone-number
>

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
cep
" 
ui-br-cep-mask
>

• Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
initializedCpf
" 
ui-br-cpf-mask
>

• Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
initializedCnpj
" 
ui-br-cnpj-mask
>

• Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
initializedCpfCnpj1
" 
ui-br-cpfcnpj-mask
>

<
select
 ng-init
="
ufs=['AC','AL','AM','TO']
" 
ng-model
="
selectedUF
" 
ng-options
="
uf for uf in ufs
"
>
</
select
>

<
input
 type
="
text
" 
name
="
field19
" 
ng-model
="
ieField
" 
ui-br-ie-mask
='
selectedUF
'
>

• Support masks for all the 27 brazillian states.

• Validations according to the Sintegra especification .

-Example:

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
initializeTime
" 
ui-time-mask
>

• Support to the short attributes.

<
input
 type
="
text
" 
name
="
field
" 
ng-model
="
initializeTime
" 
ui-time-mask
="
short
"
>

See more usage examples in the Demo page

• ui-nfe-acces-key-mask
• ui-time-mask
• ui-date-mask
• ui-br-boleto-bancario-mask
• ui-scientific-notation-mask
• ui-us-phone-number

If you are using bower or npm (without browserify):

• angular-input-masks-dependencies.js: provides all external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks-br.js: provides only global and BR directives, and does not include external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks-us.js: provides only global and US directives, and does not include external dependencies (string-mask, br-validations, momentjs)
• angular-input-masks.js: provides all directives, and does not include external dependencies (string-mask, br-validations, momentjs)

If you are using npm with browserify:

• require('angular-input-masks') : provides all directives
• require('angular-input-masks/br') : only global and BR directives
• require('angular-input-masks/us') : only global and US directives

Looking for related filters? Take a look at angular-br-filters

npm install
gulp build

• Unit:
• Uses Karma + Jasmine
• Files: src/**/*.test.js

gulp test:unit

• e2e:
• Uses Protractor + Jasmine
• Files: src/**/*.spec.js

gulp test:e2e

• To run both tests:

gulp test