Skip to content

Latest commit

 

History

History
255 lines (167 loc) · 7.21 KB

README.md

File metadata and controls

255 lines (167 loc) · 7.21 KB
Raw

angular-input-masks Build Status Coverage Status

NPM

Join the chat at https://gitter.im/assisrafael/angular-input-masks Bountysource

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

Compatibility

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

Installation

With Bower:

bower install --save angular-input-masks

With npm:

npm install --save angular-input-masks

Configuration

With bower or npm (without browserify):

  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.

  1. Include the module name ui.utils.masks in your angular app. For example:
angular.module('app', ['ui.utils.masks']);

With npm and browserify:

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

Internationalization

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

How to use

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

  • 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

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'>

ui-time-mask

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

More examples

See more usage examples in the Demo page

Masks without documentation (help wanted!)

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

Another build options

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

Filters

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

Build

npm install
gulp build

Tests

gulp test:unit
  • e2e:
  • Uses Protractor + Jasmine
  • Files: src/**/*.spec.js
gulp test:e2e
  • To run both tests:
gulp test