angular-mask

angular-input-masks

Personalized and localized input masks for AngularJS

Installation

With Bower:

bower install --save angular-input-masks

How to use

1. Import the masks.min.js script in your page.

2. Include the module ui.utils.masks in your angular app.

3. Include the ui-mask directive in a text field like the examples abouve:

ui-number-mask

• 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.

ui-percentage-mask

• 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">

• 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.

ui-money-mask

• 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.

ui-br-phone-number

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

ui-br-cep-mask

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

ui-br-cpf-mask

• Example:

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

ui-br-cnpj-mask

• Example:

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

ui-br-cpfcnpj-mask

• Example:

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

ui-br-ie-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.

More examples

See more usage examples in the Demo page

Filters

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

Build

npm install
gulp build

Tests

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

gulp test:unit

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

gulp test:e2e

• To run both tests:

gulp test

Changelog

1.4.0

Features

• ui-us-phone-number

Breaking changes

The build files are no longer available in the release folder. They are now at a separated repository

The instalation via bower remains the same. However all files are in root insted of the release folder.

Now we have 3 different build options:

• angular-input-masks.js that have all directives
• angular-input-masks.br.js that have only global and br directives
• angular-input-masks.us.js that have only global and us directives

<a name="1.3.0"></a>