/angular-input-masks

Personalized input masks for AngularJS

Primary LanguageJavaScriptMIT LicenseMIT

angular-mask

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

ui-pl-postal-code-mask

<input type="text" name="field" ui-pl-postal-code-mask>

ui-pl-pesel-mask

<input type="text" name="field" ui-pl-pesel>

ui-pl-nip-mask

<input type="text" name="field" ui-pl-nip-mask>

ui-pl-regon-mask

<input type="text" name="field" ui-pl-regon-mask
>```

### ui-pl-medical-no-mask ###
```html
<input type="text" name="field" ui-pl-medical-no-mask>

ui-pl-passport-no-mask

<input type="text" name="field" ui-pl-passport-no-mask>

ui-pl-id-no-mask

<input type="text" name="field" ui-pl-id-no-mask>
  • Added support for validation & formatting of polish Postal Code, Pesel, Nip and Regon (9# & 14#), Docto Number (Numer prawa wykonywania zawodu)

More examples

See more usage examples in the Demo page

Tests

Uses Protractor.

Run throug gulp:

gulp test