Angular custom directive for input validation

Question

I,m trying to create simple custom directive in angularJS which validates if user types in an an integer or not.

If the user enters an integer then an error message should appear in the bottom that "integers are not allowed".

Any idea how can i achieve this...? (A fiddle would be awesome)

and also...

Is this possible to do WITHOUT using $scope.$watch ?

Is this a professional and effective way to check for client side input validation ? (does this approach compromises performance of the application) ?

Zohaib Ijaz · Accepted Answer · 2016-06-26 20:32:12Z

1

You can use ng-pattern to validate if it is a valid number or not. Other way is as you asked , create a custom directive. I am going with notNumber name, it can be isNumber as well with small change.

angular.module('app')
  .directive('notNumber', notNumber);

function notNumber() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      ctrl.$formatters.unshift(function(value) {
        if (value) {
          ctrl.$setValidity('notNumber', Number.isNaN(value));
        }
        return value;
      });
    }
  };
}

In HTML,

<input type="text" ng-model="model" not-number />

answered Jun 26, 2016 at 20:32

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Over a year ago

Nope...the code is not working...i don't see any error if user types an integer...can you please make a fiddle ?

charlietfl · Accepted Answer · 2016-06-26 20:31:11Z

0

Simpler than you might have expected.... use ng-pattern

<input type="text" ng-model="model" ng-pattern="\\d+" />

The demo in docs link above is set to this same pattern as default.

As for doing this...of course, providing user feedback live in form is normal. It doesn't alleviate doing server side validation though which must be done

answered Jun 26, 2016 at 20:31

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

Simon Over a year ago

Nope...the code is not working...i don't see any error if user types an integer...can you please make a fiddle ?

Collectives™ on Stack Overflow

Angular custom directive for input validation

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related