Handling Input validation in AngularJs?

Question

I am very new to angularjs and I just cant figure out how I would go about validating my inputs.

I have an input which should never be empty. The model will always have a value. Whenever a user inputs invalid data (i.e nothing or maybe invalid characters) I would like the input to revert to its original value.

For instance, If the initial value was 50 and I deleted all of that (or entered text) and deselected the input, I would expect the input's value to change back to 50.

Here is my controller:

var MyController = null;
app.controller("MyController", ["$scope", function($scope) {
    $scope.data = myData;
    $scope.validate = function(value, oldValue) {
        if(!value || value == "") {
            // Do something after validation
            value = oldValue;
        }
        // Our value should be valid now (either replaced or changed)
    }
    MyController = $scope;
}]);

And my HTML (i would rather not have to type data.something twice if possible):

<input type="text" ng-model="data.something" ng-change="validate()" />

Small Clarification: If the value of the input is "50" and a user removes the "0", the input would be at "5" which is valid. However if the user adds a "x" after I DONT want the input to change, it should still be at "5". However if all the input is empty, I would like onBlur for the original value to be placed back into the input and the model unchanged.

There is (at least) one tricky detail: say "50" is valid, as well as "5", but "5x" isn't (e.g. a numeric input). The user focuses the input while it contains "50", deletes the trailing zero (now it contains "5" - still valid) and then appends "x" and focuses out. Noe the input contains "5x" - invalid. What value should the input revert to? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 5, 2016 at 18:44
@NikosParaskevopoulos Look at my updated Answer with a clarification, sorry for the confusion again. — Hunter Mitchell
– Hunter Mitchell, Commented Jun 5, 2016 at 18:53
Why not HTML5? <input type="text" ng-model="data.something" ng-change="validate()" required="required" /> — Baruch
– Baruch, Commented Jun 5, 2016 at 18:57
@Baruch This is not a form. To my knowledge that is only checked when the form is submitted. — Hunter Mitchell
– Hunter Mitchell, Commented Jun 5, 2016 at 18:58
Some alternatives that may be helpful: the built-in forms stuff supports validation incl the new html5 input types and attributes, and additionally ng-pattern may also be helpful. — Jeroen
– Jeroen, Commented Jun 5, 2016 at 19:26

Petr Averyanov · Accepted Answer · 2016-06-05 18:58:04Z

2

Yep, you need ng-blur and probably ng-focus:

<input type="text" ng-model="data.something" ng-focus="store()" ng-blur="revertIfInvalid()"/>

$scope.store = function() {
  $scope.stored = $scope.data.something;
}

$scope.revertIfInvalid= function() {
  if (!$scope.data.something) {
    $scope.data.something = $scope.stored;
  }
}

This will work, but to make it reusable, you then want to make directive for this, like:

app.directive('fancydirective', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(sc, elem, attrs, ngModelCtrl) {
      var stored;
      elem.on('focus', function() {
        sc.$apply(function() {
          stored = ngModelCtrl.$modelValue;
        });
      });
      elem.on('blur', function() {
        sc.$apply(function() {
          if (ngModelCtrl.$invalid) {
            ngModelCtrl.$setViewValue(stored);
            ngModelCtrl.$render();
          }
        });
      });
    }
  }
});

http://plnkr.co/edit/fiRKS765Kyh6ikRqc8if?p=preview

answered Jun 5, 2016 at 18:58

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

4 Comments

Hunter Mitchell Over a year ago

This works perfectly, however is there a way I can add further validation (like allowing only text)? So, if I was to press "0" in this case, nothing would happen and the model data wouldn't change.

Baruch Over a year ago

@HunterMitchell You can add validation logic inside the elem.on('blur', ...). Maybe add an if statement that tests a regex that returns false if there's any character that's not a word character.

Hunter Mitchell Over a year ago

@Baruch that makes sense. Could I also do validation within elem.on('change', ...) to validate even further (i.e. remove any numbers as they are typed)

Petr Averyanov Over a year ago

@Hunter, as u see in this directive there is a check for valid - so you can add any other validator like ng-pattern or custom.

Collectives™ on Stack Overflow

Handling Input validation in AngularJs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related