angularjs-currency-input-mask

1.1.2 • Public • Published

AngularJS Currency Input Mask

Module for AngularJS 1.3+ providing a input mask and filter for working with variable currency configurations. It allows the user to type only digits while formatting the currency in the pattern passed as a parameter to the directive.

Installation

npm install --save angularjs-currency-input-mask

Configuration

Import the minified script from dist/angularjs-currency-input-mask.min.js to your page

<script src="node_modules/angularjs-currency-input-mask/dist/angularjs-currency-input-mask.min.js"></script>

Add the module cur.$mask as dependency of your main application module

angular.module('myapp', ['cur.$mask'])

Usage

  • Basic usage example
<input type="text" ng-model="value" mask-currency />

Adding the mask-currency directive to an input with ng-model associated will load settings from $locale provider. It means that, if no configuration is provided, values will be masked in the same format of the currency filter.

  • Setting up custom pattern
<input type="text" ng-model="value" mask-currency="'R$'" config="{group:'.',decimal:',',indentation:' '}" />

Adding up custom settings will change the mask applied. The example above sets the format to brazilian reais currency.

  • Making it dynamic
<input type="text" ng-model="value" mask-currency="currency.symbol" config="currency.config" />

Making use of the controller scope enables dynamic settings for the mask, not locking on a single locale. As shown on the demo file, a list of currencies with its given configurations is created to provide different filling options to the input, and then is attached to the scope:

var currencies = [
    {symbol:'\u20AC'},
    {symbol:'\u00A3',config:{indentation:' '}},
    {symbol:'\u00A5', config:{decimalSize:0}},
    {symbol:'R\u0024',config:{group:'.',decimal:',',indentation:' '}}
]
angular.module('demo',['cur.$mask'])
    .controller('ctrl', function($scope,$locale) {
        $scope.currencies = currencies;
        $scope.currency = currencies[0];
    })

Be aware that modifying the floating point of the input will result in a different number. If the number 123456 is typed on the input it will be shown as something like $1,234.56 depending on the config parameter, but if decimalSize is changed to zero within the config parameter the number shown will be something like $123,456 != $1,234.56

Filter

To format an output that matches the input mask pattern, the filter printCurrency is available

{{value | printCurrency : currency.symbol : currency.config}}

Options

The options available to the config parameter object are:

  • indentation: defines character(s) separation between currency sign and value
  • orientation: 'l' to show symbol at the left 'r' to show on the right
  • decimal: the character separator to the fraction
  • group: the character separator to the groups of numbers
  • decimalSize: number of digits after the decimal point
  • groupSize: number of digits within a group of numbers

Demo

A Demo page containing different usage scenarios is located in demo/index.html

Build

If you are cloning the repository you must have gulp globally installed and run the following commands in order to have the dist folder generated:

npm install
npm run build

Testing

Tests are coded using Karma + Jasmine. The easiest way to run these checks is the following

npm install
npm test

Dependencies (0)

    Dev Dependencies (12)

    Package Sidebar

    Install

    npm i angularjs-currency-input-mask

    Weekly Downloads

    65

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    62.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • ian.gopfert