title: AngularJS - write custom directive to validate passed values
body: <p>I have an html form that looks like this :</p>
  
  <pre><code>&lt;div class="row col-lg-offset-3"&gt;
      &lt;div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid &amp;&amp; userForm.Age.$dirty}" show-errors &gt;
          &lt;label class="control-label"&gt;Age&lt;/label&gt;
          &lt;input type="text" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>(function(){
      angular.module('myApp', [])
  .controller('studentDataController', function($scope) {})
  .directive('showErrors', function() {
      return {
        restrict: 'A',
        require:  '^form',
        link: function (scope, el, attrs, formCtrl) {
  
          var inputEl   = el[0].querySelector("[Age]");
  
          var inputNgEl = angular.element(inputEl);
  
          var inputValue = inputNgEl.attr('Age');
  
          var isValid = (inputValue &gt;= 3 &amp;&amp; inputValue &lt; 100);
  
           inputNgEl.bind('blur', function() {
            el.toggleClass('has-error', isValid);
          })
        }
      }
    });
  })();
  </code></pre>
  
  <p>I am trying to validate input for Age field when it blurs out.Age value should be between 3 to 99.i.i.e check if the value is valid or invalid when user is done typing and leaves the text field.Then if the value is invalid, apply the has- class
  The directive though is not working. Did I miss anything ?</p>