text: Q:
  
  Controlling when validation happens in angular
  
  Is it possible to control when angular's form validations run?  Specifically, I want to show fields as invalid only when
  
  A field as received and lost focus (blur)  
  The user tries to submit
  
  and I want to hide it while the field has focus. 
  The default behavior of Angular of showing validation errors on forms when it first loads seems like a bad user experience to me.  I've been able to get this partially working on blur for the require attribute using using the pattern from here, but I really don't want to have to re-implement all the validations.   
  Is it possible to control this timing globally?  
  
  A:
  
  I ended up solving this by using a custom directive that adds focus/blur properties and classes to each of the form's controls:
  app.directive('input', function() {
      return {
          restrict: 'E',
          require: '?ngModel',
          link: function(scope, elm, attr, ctrl) {
              if (!ctrl) {
                  return;
              }
  
              elm.on('focus', function () {
                  elm.addClass('has-focus');
  
                  scope.$apply(function () {
                      ctrl.hasFocus = true;
                  });
              });
  
              elm.on('blur', function () {
                  elm.removeClass('has-focus');
                  elm.addClass('has-visited');
  
                  scope.$apply(function () {
                      ctrl.hasFocus = false;
                      ctrl.hasVisited = true;
                  });
              });
  
              elm.closest('form').on('submit', function () {
                  elm.addClass('has-visited');
  
                  scope.$apply(function () {
                      ctrl.hasFocus = false;
                      ctrl.hasVisited = true;
                  });
              });
  
          }
      };
  });
  
  With this in place, you can control the error highlighting on input fields through some plain ol css:
  input.has-visited.ng-invalid:not(.has-focus) {
      background-color: #ffeeee;   
  }
  
  And check for form.<element>.hasVisited when showing the validation error messages.
  Hope this helps someone else. :)
  
  