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
Then add the
fcsa-number module as a dependency to you Angular app.
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.