用户离开字段后验证字段

Question

使用AngularJS,我可以使用ng-pristine或ng-dirty检测用户是否已进入该字段.但是,我想在用户离开字段区域后才进行客户端验证.这是因为当用户输入电子邮件或电话等字段时,他们将始终收到错误,直到他们完成输入完整的电子邮件,这不是最佳的用户体验.

例

---

更新:

Angular现在附带自定义模糊事件:https: //docs.angularjs.org/api/ng/directive/ngBlur

Answer 1

从版本1.3.0开始,这可以很容易地完成$touched,这在用户离开现场后就是如此.

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

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

Answer 2

角1.3现在已经NG-模型选项,您可以将选项设置为{ 'updateOn': 'blur'}例如,你甚至可以去抖,当使用或者是打字速度太快,或者你想节省一些昂贵的DOM操作(如型号写入到多个DOM位置,你不希望每个键都发生$ digest循环)

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

默认情况下,对内容的任何更改都将触发模型更新和表单验证.您可以使用ngModelOptions指令覆盖此行为,以仅绑定到指定的事件列表.即,模型选项="{updateOn:'blur'}"仅在控件失去焦点后才会更新和验证.您可以使用空格分隔列表设置多个事件.即模型选项="{updateOn:'mousedown blur'}"

去抖动

您可以使用带有ngModelOptions指令的去抖键来延迟模型更新/验证.此延迟也适用于解析器,验证器和模型标志,如$ dirty或$ pristine.

即,在触发模型更新和表单验证之前,自上次内容更改后,等模型选项="{debounce:500}"将等待半秒钟.

Answer 3

我通过扩展@jlmcdonald的建议来解决这个问题.我创建了一个自动应用于所有input和select元素的指令:

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

当用户关注/访问元素时,这将为各种元素添加has-focus和has-visited类.然后,您可以将这些类添加到CSS规则中以显示验证错误:

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

这很有效,因为元素仍会获得$ invalid属性等,但CSS可用于为用户提供更好的体验.

Answer 4

我设法用一个非常简单的CSS来做到这一点.这确实要求错误消息是它们所涉及的输入的兄弟,并且它们具有一类error.

:focus ~ .error {
    display:none;
}

满足这两个要求之后,这将隐藏与聚焦输入字段相关的任何错误消息,我认为angularjs应该做的事情.似乎是疏忽.

Answer 5

这似乎在较新版本的 angular 中作为标准实现。

类NG-不变和NG-触摸之前分别被设置并且用户之后已聚焦的验证元件上。

CSS

input.ng-touched.ng-invalid {
   border-color: red;
}