javascript - 控制何时以角度进行验证

Question

是否可以控制 Angular 的表单验证何时运行？具体来说，我只想在以下情况下将字段显示为无效

1. 接收和失去焦点的字段（模糊）
2. 用户尝试提交

我想在该领域有焦点时隐藏它。

Angular 在首次加载时在表单上显示验证错误的默认行为对我来说似乎是一种糟糕的用户体验。我已经能够使用此处的模式对 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何时显示验证错误消息。

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