AngularJS form validation directive for showing input errors

Question

I need to create a validation directive for showing all input errors for each input automatically. This validation directive should show all errors at current moment and list of

Answer 1

Take a look at the ng-messages directive. Its fairly elegant. Example:

<form name="myForm">
  <input type="text" ng-model="field" name="myField" required minlength="5" />
  <div ng-messages="myForm.myField.$error">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">The value entered is too short</div>
  </div>
</form>

You can then combine it with any form validation. Just place the error messages from the validators onto the elements $error object and they are automatically rendered in your UI.

Answer 2

all input errors for each input automatically

Personally, I see more cons than pros from that phrase.

1. Hiding error messages into javascript from html.

• I think it's better to show as much info. as possible to developers with html in a understandable way,
  and I believe it is the way to go.

2. Adding complexity for the future custom error messages.

• What if your next developer wants to change error messages to, Hey, your input is too short.
  Do you want him to abandon your general error messages? Or, change it in your javascript?

• What if your next developer add his custom error messages using ng-show.
  Then, you will have two error messages meaning the same.
  Then, will you not allow to have that? or, your general directive error message should be hidden? Or, apply that custom error message into general error message? If so, then how? See, it gets complex.

IMHO, this general error message only works when you are very sure of the following;

• Error messages are all the same on many many many pages.
• Error messages will NEVER change in any case in the future.
• html developers should not care about error messages.
• No custom error message is allowed.

If you are not sure about the above I mentioned, I would recommend not to create a general error messages.

Answer 3

I want to suggest look at this post in this post author is explaining how to achieve your goals , and you can deeply dive into the code . link

example from this post showing error messages

module = angular.module('app', []);

module.directive('showErrors', function($timeout) {
    return {
      restrict: 'A',
      require: '^form',
      link: function (scope, el, attrs, formCtrl) {
        // find the text box element, which has the 'name' attribute
        var inputEl   = el[0].querySelector("[name]");
        // convert the native text box element to an angular element
        var inputNgEl = angular.element(inputEl);
        // get the name on the text box
        var inputName = inputNgEl.attr('name');

        // only apply the has-error class after the user leaves the text box
        var blurred = false;
        inputNgEl.bind('blur', function() {
          blurred = true;
          el.toggleClass('has-error', formCtrl[inputName].$invalid);
        });

        scope.$watch(function() {
          return formCtrl[inputName].$invalid
        }, function(invalid) {
          // we only want to toggle the has-error class after the blur
          // event or if the control becomes valid
          if (!blurred && invalid) { return }
          el.toggleClass('has-error', invalid);
        });

        scope.$on('show-errors-check-validity', function() {
          el.toggleClass('has-error', formCtrl[inputName].$invalid);
        });

        scope.$on('show-errors-reset', function() {
          $timeout(function() {
            el.removeClass('has-error');
          }, 0, false);
        });
      }
    }
  });

module.controller('NewUserController', function($scope) {
  $scope.save = function() {
    $scope.$broadcast('show-errors-check-validity');

    if ($scope.userForm.$valid) {
      alert('User saved');
      $scope.reset();
    }
  };

  $scope.reset = function() {
    $scope.$broadcast('show-errors-reset');
    $scope.user = { name: '', email: '' };
  }
});

Answer 4

Here is the pattern that I used (with Angular 1.3):

app.directive('number', function() {
  var NUMBER_REGEXP = /^(\d+)$/;
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.number = function(modelValue, viewValue) {
        return NUMBER_REGEXP.test(viewValue);
      };
    }
  };
});

Then I was able to check for errors in the HTML (with Bootstrap 3.3) using this pattern:

<form name="form">
  <div class="form-group"
       ng-class="{'has-error': form.value.$dirty && form.value.$error.number}">
    <label for="id_value" class="control-label">Value:</label>
    <div>
      <input type="text" class="form-control" id="id_value" name="value"
             ng-model="model.number" number>
      <p class="help-block" ng-if="form.value.$error.number">Please enter a number</p>
    </div>
  </div>
</form>

Explanation:

The number attribute in the <input name="value"> tag triggers the directive, which causes the ngModel validator 'number' to be called and to set/unset value.$error.number.

If value.$error.number is set, then the has-error class is applied to the form-group so it displays a red input field and the help message is displayed.