CODEWITHSUNDEEP
javascriptangularjsvalidationangularjs-directive
S Panfilov
S Panfilov

Reputation: 17551

How to set validity in directive (angularjs)

Is there a way to set an input validity inside a directive? The input present in the directive's template.

Lets say I have template:

<input type="text" ng-model="someObj.val" ng-change="check()">

And my directive is like:

.directive('myDir', function () {
      return {
        restrict: 'E',
        templateUrl: 'trmplate.html',
        link: function (scope) {

          someObj = {val: '123'};

          scope.check = function () {
            var result = false;
            myInput.$setValidity(result); //this is didn't work, $setValidity not a function
          };

        }
      }
    })

I'm cannot wrap it with form, because the idea behind it is to allow user to include this input inside user's form.

Upvotes: 2

Views: 8642

Answers (2)

Sergio Fandino
Sergio Fandino

Reputation: 435

You don't need to use elem in order to get the controller, just add it as a param to the link function, and set require to ['ngModel'] in order to get the model ctrl.

 require: ['ngModel'],
 link: function (scope, elem, attrs, ctrl) {

      someObj = {val: '123'};

      scope.check = function () {
        var result = false;
        ctrl.$setValidity(result);
      };

    }

Upvotes: 3

dfsq
dfsq

Reputation: 193261

You need to retrieve NgModelController instance associated with the input. Then you call $setValidity on this object specifying validation key (required, minlength, customkey, etc.). It will look like this:

.directive('myDir', function() {
  return {
    restrict: 'E',
    template: '<input type="text" ng-model="someObj.val" ng-change="check()">',
    link: function(scope, element) {

      var modelController = element.find('input').controller('ngModel');

      someObj = {
        val: '123'
      };

      scope.check = function() {
        var result = false;
        modelController.$setValidity('myrequired', result);
      };

    }
  }
})

The most important part here is how to get NgModelController. Below line of code is taking care of it:

var modelController = element.find('input').controller('ngModel');

Upvotes: 4

Related Questions