When I want to provide a number input box with basic validation and formatting in an AngularJS app, I have found the default way to be lacking. The default way to is to declare an input element with a number type: <input type="number" />. However, I want to automatically add commas as thousands separators, and I want to validate no more than 2 decimals are entered for currency fields. Both of these are not possible with the the default way.

So I created the FCSA Number directive that provides this functionality. (view on Github)

Here’s a quick demo of the available validations and formatting provided by the directive.

To use it on your site

Install it on your site either with bower: bower install angular-fcsa-number

Or install it manually by copying src/fcsaNumber.js from the Github project into your project.

And make sure to reference the src/fcsaNumber.js in your JavaScript files.

Then add the fcsa-number module as a dependency to you Angular app.

angular.module('yourApp', ['fcsa-number']);

And finally add the fcsa-number attribute to textboxes you want to have validated and formatted with thousands separators.

<input type='text' ng-model='company.employeeCount' fcsa-number />

When an invalid number is entered by the user, the form and control will become invalid and the fcsa-number-invalid class will be added to the text box.