Validate fields after user has left a field

From version 1.3.0 this can easily be done with $touched, which is true after the user has left the field.

<p ng-show="form.field.$touched && form.field.$invalid">Error</p>

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Angular 1.3 now has ng-model-options, and you can set the option to { 'updateOn': 'blur'} for example, and you can even debounce, when the use is either typing too fast, or you want to save a few expensive DOM operations (like a model writing to multiple DOM places and you don't want a $digest cycle happening on every key down)

https://docs.angularjs.org/guide/forms#custom-triggers and https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates

By default, any change to the content will trigger a model update and form validation. You can override this behavior using the ngModelOptions directive to bind only to specified list of events. I.e. ng-model-options="{ updateOn: 'blur' }" will update and validate only after the control loses focus. You can set several events using a space delimited list. I.e. ng-model-options="{ updateOn: 'mousedown blur' }"

And debounce

You can delay the model update/validation by using the debounce key with the ngModelOptions directive. This delay will also apply to parsers, validators and model flags like $dirty or $pristine.

I.e. ng-model-options="{ debounce: 500 }" will wait for half a second since the last content change before triggering the model update and form validation.

I solved this by expanding on what @jlmcdonald suggested. I created a directive that would automatically be applied to all input and select elements:

var blurFocusDirective = 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;                });            });        }    };};app.directive('input', blurFocusDirective);app.directive('select', blurFocusDirective);

This will add has-focus and has-visited classes to various elements as the user focuses/visits the elements. You can then add these classes to your CSS rules to show validation errors:

input.has-visited.ng-invalid:not(.has-focus) {    background-color: #ffeeee;   }

This works well in that elements still get $invalid properties etc, but the CSS can be used to give the user a better experience.