AngularJS directive scope property matching

Question

I am trying to write an isolated directive that will run regex to validate certain input fields. I want the directive to know what regex to match up on and use based on an attribute on the input.

a sample input would look like this.

<input required tabindex="5" regex-validation regex="validationRegex.zipRegex" ng-model="payment.zip" type="text" />

below is a sample from the directive where it sets up a controller to match on then the directive itself. scope.regex.test logs undefined.

module.controller('Controller', function($scope) {
    $scope.validationRegex = {
        americanExpressRegex: new RegExp(/^(?!3[47]).*$/),
        cvvRegex: new RegExp(/^[0-9]{3,4}$/),
        currencyRegex: new RegExp(/^[$]?\d{0,18}\.?\d{0,2}$/),
        cityRegex: new RegExp(/^[a-zA-Z]+(?:[\s-][a-zA-Z]+)*$/),
        zipRegex: new RegExp(/^[0-9]{5}(?:-[0-9]{4})?$/),
        phoneRegex: new RegExp(/^(\d(\s|\.|\-)?)?\(?\d{3}\)?(\s|\.|\-)?\d{3}(\s|\.|\-)?\d{4}$/),
        /* jshint ignore:start */
        emailRegex: new RegExp("^[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?$"),
        /* jshint ignore:end */
        numberRegex: new RegExp(/^\d+$/),
        addressRegex: new RegExp(/^[A-Za-z0-9 \-_\.,]{0,55}$/),
        bankAccountRegex: new RegExp(/^[0-9]{1,17}$/),
        routingNumberRegex: new RegExp(/^((0[0-9])|(1[0-2])|(2[1-9])|(3[0-2])|(6[1-9])|(7[0-2])|80)([0-9]{7})$/)
    };
})
    .directive('regexValidation', [function () {
        return {
        scope: { regex: "=" },
        link: function (scope, element) {
            element.bind('change', function () {
                console.log(scope.regex);
                //grab the element we are working with into a jquery element
                var ele = $(element);

                //grab the element value for multiple future use
                var value = ele.val();

                //if we have a value check with regex
                if (value && !**scope.regex.test**(value)) {
                    ele.parent().addClass("error");
                }
                    //this will set the element back to how it was and check to see if all validation is
                    //complete
                else {
                    ele.parent().removeClass("error");
                }
            });
        }
    };
}]);

Answer 1

Get rid of jQuery and never look back. You'll make it a lot further with Angular.

Angular is already working with the changing value of the input and running it through a pipeline. You need to use that pipeline to interact with the value, rather than attaching an event listener.

Check out the ngModelController documentation here.

I explain this process in a lot more detail and with a demo here.

If you're using a recent version of Angular, you'll use a $validator for this. For older versions, you would use a $parser. Rather than adding a class to declare the state, use ngModel's $error state. Here's an example to get you started.

Live demo

.controller('myCtrl', function($scope) {

  $scope.foo = 'abc';
  // in my example, it's always going to be invalid
  $scope.fooValidity = false;

})

.directive('myDirective', function() {

  var directive = {
    scope: {
      isValid: '=myDirective'
    },
    require: 'ngModel',
    link: function($scope, $element, $attrs, $ngModel) {

      // "whatever" is the property which will be assinged on the ngModel $error object
      $ngModel.$validators.whatever = function(val) {
        // write your validation logic here
        // return true or false for valid / invalid
        return $scope.isValid;
      };

    }
  };

  return directive;

})

;

Markup:

<!-- Add the `error` class by using the model's error object -->
<!-- Also note that Anuglar will add a `ng-invalid-whatever` class for you -->
<form name="myForm" ng-class="{error:myForm.fooInput.$error.whatever}">
  <input ng-model="foo" name="fooInput" my-directive="fooValidity">
  <p ng-show="myForm.fooInput.$error.whatever">It's invalid!</p>
</form>

Answer 2

Mixing Angularjs and jQuery is not best option. But you can validate your input without jQuery see my working demo here http://plnkr.co/edit/UzQ6DZcKYLk3PCHeEJiv?p=preview

Just pass your model and regular expression to directive and after that test your regular expression on model update

app.directive('regexValidation', [

  function() {
    return {
      scope: {
        regex: "=",
        model: '=ngModel'
      },
      link: function(scope, element, attr) {
        scope.$watch('model', function(newValue, oldValue) {


          if (!newValue|| scope.regex.test(newValue)) {
            element.removeClass("error").addClass('valid');
          } else {
            element.addClass("error").removeClass('valid');
          }
        });
      }
    };
  }
]);