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.

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.

• javascript
• angularjs
• validation
• angularjs-directive

• 1 What is myInput? – dfsq Commented Apr 19, 2016 at 14:54
• @dfsq To be honest I just didn't know what object should have $setValidity method. Somewhere I've found ngModel.$setValidity(), somewhere it was ctrl.$setValidity() – S Panfilov Commented Apr 19, 2016 at 14:59
• If you will require ngModel and important thing is you should give name to that input element then you can access and set $validity of that element using controller (fourth parameter of link function). or see my question stackoverflow./questions/30156602/… – 9me Commented Apr 20, 2016 at 10:19

2 Answers 2

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');

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);
      };

    }