angular-number-input

angular-number-input

AngularJS number input directive

• Overview
• Demo
• Usage
• Installation
• API Documentation
• Contributing
• Release History
• License

Overview

The number-input is an angular directive which provides number validation, parsing and formatting capabilities on any HTML element.

Demo

Live Demo

Usage

In order to use the number-input directive you first must add the relevant dependencies:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-number-input.js"></script>

Next you must define it as a dependency in your main angular module as follows:

angular.module('exampleApp', [
    'number-input'
]);

Now you can use the directive in your HTML templates, for example:

<input type="text" class="number-input"
  ng-model="value"
  min="-100"
  max="100"
  step="0.5"
  validation="myNumberValidation"
  formatter="myNumberFormatter"
  parser="myNumberParser">

In case you have common parsing/formatting/validations/min/max/step you wish to use in many places in your application, you can create a service to implement those and provide it to the directive as follows:

<input type="text" class="number-input"
  ng-model="value"
  service="myMoneyService">

And an example service:

angular.module('moneyModule', []).service('myMoneyService', function () {
    return {
        create: function () {
            return {
                config: null, //will be populated by the directive with the config which holds the min/max/step/... values
                min: 10,
                max: 100,
                step: 5,
                format: function (value) {
                    if (value) {
                        value = '$' + value;
                    }

                    return value;
                },
                parse: function (value) {
                    if (value) {
                        if (value.charAt(0) === '$') {
                            value = value.substring(1);
                        }
                    }

                    value = Number(value);

                    return value;
                },
                validate: function (modelValue, viewValue) {
                    return true;
                },
                link: function (scope, element, attrs, ngModelCtrl) {
                    //do some custom stuff on the directive instance like adding DOM event handling
                    element.on('keydown', function ($event) {
                        switch ($event.keyCode) {
                        case $.ui.keyCode.ENTER:
                            element.blur();
                            break;
                        }
                    });
                }
            };
        }
    }
});

In case both service and HTML attributes provide a definition for same attributes (for example min, max, parser and so on...), the HTML attribute value will override the service provided value.
If the HTML provided value changes to undefined/null/invalid value, the service value will be used instead.

Installation

Run npm install in your project as follows:

npm install --save angular-number-input

Or if you are using bower, you can install it as follows:

bower install angular-number-input --save

API Documentation

See full docs at: API Docs

Contributing

See contributing guide

Release History

Date	Version	Description
2020-05-11	v2.0.0	Migrate to github actions, upgrade minimal node version and remove bower
2019-02-08	v1.1.7	Maintenance
2018-02-12	v1.1.2	Add support for step validations using big.js for more accurate calculations
2018-02-01	v1.0.38	Link function of the provided service will only be called once to prevent memory leaks
2016-07-11	v0.0.27	Service can now provide min/max/step values and template values override service values
2016-06-14	v0.0.22	Published via NPM (in addition to bower)
2016-05-17	v0.0.14	Directive element now listens to new number-input$update-model event
2016-05-15	v0.0.11	Redesign of service integration
2016-05-09	v0.0.5	'service' is now string value and not binded to scope
2016-05-09	v0.0.3	Adding common service support
2016-05-08	v0.0.3	Initial release

License

Developed by Sagie Gur-Ari and licensed under the Apache 2 open source license.