This is my custom Currency Mask for Angular JS Directive.

Here is my custom Angular JS Directive to ensure user input is within the valid number range. The code works like this:

  • The user input is parsed by a regex expression to ensure that only digits are allowed.
  • Once it gets parsed, it will check if the value is within the number range specified using range-min and range-max attributes.
  • If it is below the range minimum, set the ngModel value to the range minimum value.
  • If it is more than the range maximum, set the ngModel value to the range maximum value.

Here is the Javascript code for the directive.

And here is the sample HTML code.

A good case scenario to apply this directive is for input fields for percentage where 1-100 is your number range.

This is my custom version of an Angular JS Directive to ensure input values are digits only.

You can then use the directive in the input field like this:

Using ng-pattern regex is good only for validation but does not hinder the user from inputting non-numeric characters so having a directive like this makes it even better to be sure that inputs are numeric only.

Related Posts Plugin for WordPress, Blogger...