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.