javascript - 控制何时以 Angular 进行验证

Question

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

时将字段显示为无效

1. 收到的字段和失去焦点(模糊)
2. 用户尝试提交

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

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

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

Answer 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显示验证错误消息时。

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