控制何时以角度进行验证答案

【问题标题】：Controlling when validation happens in angular控制何时以角度进行验证
【发布时间】：2013-05-20 13:13:30
【问题描述】：

是否可以控制 Angular 的表单验证何时运行？具体来说，我想在

时将字段显示为无效仅

一个字段作为接收和失去焦点（模糊）
用户尝试提交

我想在该字段有焦点时隐藏它。

Angular 在首次加载表单时显示验证错误的默认行为对我来说似乎是一种糟糕的用户体验。我已经能够使用here 中的模式来部分处理require 属性的模糊，但我真的不想重新实现所有验证。

是否可以全局控制这个时间？

【问题讨论】：

好吧，你试着把你所有的任务分组，嗯，试着问一些特别的东西。不要认为有人会发布所有请求的工作代码
我不是在找代码，只是一个通用的方法。
ng-newsletter.com/posts/validations.html

标签： javascript validation angularjs

【解决方案1】：

我最终通过使用自定义指令来解决这个问题，该指令将焦点/模糊属性和类添加到表单的每个控件：

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;
                });
            });

        }
    };
});

有了这个，你可以通过一些简单的 ol css 控制输入字段上的错误突出显示：

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

并在显示验证错误消息时检查form.<element>.hasVisited。

希望这对其他人有所帮助。 :)

【讨论】：