AngularJS Watch input validity directive

Question

i like to watch the validity of an input element inside a directive. My controller is always undefined. How can i watch properties like $valid, $invalid on a input element ?

app.directive("myElement", function()
{
    return {
        restrict: "A",
        templateUrl: "./Templates/tooltip.html",
        scope: {
        },
        compile: function (element, attrs) {
            return {
                pre: function preLink(scope, element, attrs, controller) {
                },
                post: function postLink(scope, element, attrs, controller) {
                   scope.$watch(function(){return controller.$invalid;},function(newVal,oldVal){
                   });
                }
             }
         }
}

controller.$invalid only works if the controller is a FormController docs.angularjs.org/api/ng.directive:form.FormController — m.e.conroy
– m.e.conroy, Commented Dec 13, 2013 at 15:35

Nikos Paraskevopoulos · Accepted Answer · 2013-12-13 15:21:18Z

1

For the controller argument of the (pre-, post-, -) link function to work you have to require one or more controllers:

return {
    require: "ngModel",
    ...
};

Or more:

return {
    require: ["ngModel", "foo", "bar"],
    ...
};

This will not solve your problem though; You need to define a controller in the directive and make sure that the root element of the template is a named form. So you can do:

Template:

<form name="theForm">
    <input name="myInput" ng-model="foo.name" />
</form>

Directive:

return {
    controller: function($scope) {
        $scope.watch("theForm.myInput.$valid", function(isValid) {
            ...
        });
    },
    ...
};

answered Dec 13, 2013 at 15:21

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

4 Comments

MR.ABC Over a year ago

i like to avoid to use a form. need a solution without it.

Nikos Paraskevopoulos Over a year ago

Try adding the { require: "ngModel" } part of the answer to your code, but make sure the template is the <input>, or it does not work. Keep the same code in the link function.

MR.ABC Over a year ago

how can i make sure the template is <input>... just leave templateUrl away ?

Nikos Paraskevopoulos Over a year ago

If there is no template/templateUrl, then make sure you will be using your directive only on elements with ng-model. If not, Angular will throw an error (required controller not found), so it is safe.

Collectives™ on Stack Overflow

AngularJS Watch input validity directive

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