validation – 在AngularJs窗体中设置第一个无效输入的焦点

前端之家收集整理的这篇文章主要介绍了validation – 在AngularJs窗体中设置第一个无效输入的焦点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经阅读了几个文章和StackOverflow问题有关焦点的AngularJs的设置。

不幸的是,我已经读过的所有例子假设有一些属性,我可以添加到元素获得焦点,例如。 a focusMe directive

但是如果我不提前知道哪个输入设置焦点怎么办?特别是如何设置焦点到具有$ invalid set的形式的第一个输入元素 – 即验证失败的元素。可能有几个输入失败验证,所以我不能使用一个指令,只是试图调用基于这个.focus()。 (我这样做的辅助功能/ WCAG的原因,其良好做法这样做提交被点击,以最小化按键,找到第一个字段,验证失败)。

$ error对象将给所有未通过验证的控件,但是它们按故障类型分组,不按表单上的任何顺序排列。

我相信我可以想出一些kludge这样做的方式。窗体上的指令,当需要设置焦点时接收一些广播 – 然后该指令可以搜索第一个$ invalid元素。但是这似乎很复杂,我想知道这是否是一个更好的“有角度”的方式这样做。

好吧,所以答案比我想象的简单。

所有我需要的是一个指令放在表单本身,一个事件处理程序正在查找提交事件。然后可以遍历DOM寻找第一个具有.ng-invalid类的元素。

使用jQLite的示例:

myApp.directive('accessibleForm',function () {
    return {
        restrict: 'A',link: function (scope,elem) {

            // set up event handler on the form element
            elem.on('submit',function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one,set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

此处的示例使用Attribute伪指令,您可以扩展示例以使其成为元素伪指令(限制:’E’),并包含将其转换为a的模板。然而这是个人偏好。

原文链接:https://www.f2er.com/angularjs/146324.html

猜你在找的Angularjs相关文章