Angularjs get form field validity inside directive

Question

I'm hoping this isn't a duplicate - plenty of similar questions about but I can't find an answer that works.

I have an Angular directive, thus:

app.directive('emailInput', function(){     return {         restrict: 'E',         templateUrl: 'template.html',         link: function(scope, elem, attrs, ctrl){             elem.bind('keyup', function(){                 // TODO - what?             })         }     } } 

and in the template html:

<input type="email" required ng-model="emailAddress" /> 

Without knowing the name of the form, inside the link function, I want to know the value of the emailAddress.$valid property - how can I get this?

Answer 1

You can require the formController which would give you access to all of the inputs registered to the form

app.directive('emailInput', function(){   return {       require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.       restrict: 'E',       templateUrl: 'template.html',       link: function(scope, elem, attrs, ctrl){           elem.bind('keyup', function(){               ctrl.emailAddress.$valid //check validity           })       }   } } 

Remember that Angular keeps track of input elements by name. So you have to give your input a name attribute

<input type="email" required ng-model="emailAddress" name="emailAddress" /> 

I would also recommend possibly just passing all of this through a directive attribute. You probably don't want to hard code the field names. So you could just have an attribute that takes the validity

inputIsValid='formName.emailAddress.$valid' 

And evaluate (or $watch it) in your directive.