Controlling when validation happens in angular

Question

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?

Well, you try to group all your tasks, hmm, try to ask something special. Don't think that someone will post work code with all requests — Maxim Shoustin, May 24 '13 at 21:57

score 3 · Accepted Answer · answered May 28 '13 at 01:27

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. :)

Controlling when validation happens in angular

1 Answers1