将焦点设置于AngularJs形式第一次输入无效 [英] Set focus on first invalid input in AngularJs form

问题描述

我读过有关重点在AngularJs设置几篇文章和StackOverflow的问题。

I've read several articles and StackOverflow questions relating to the setting of focus in AngularJs.

不幸的是所有的，我已经阅读假定有一些属性，我可以添加到元素获得焦点，例如实例一个 focusMe指令。

Unfortunately all the examples that I have read assume that there is some attribute that I can add to the element to gain focus, e.g. a focusMe directive.

但是，如果我不事先知道该输入将焦点设置到？特别是我怎么设置集中到具有$无效集的形式第一输入元件 - 即验证失败的元素。这可能有几个输入验证失败的，所以我不能用，只是试图调用。重点指令（）在此基础上。 （我做这行辅助/ WCAG原因，其良好的做法这样做对被提交点击最小化关键presses地发现，未通过验证的第一个字段）。

However what if I don't know in advance which input to set focus to? In particular how do I set focus to the first input element in a form that has $invalid set - i.e. an element that fails validation. There could be several inputs that fail validation, so I cannot use a directive that just tries to call .focus() based on this. (I am doing this for Accessibility/WCAG reasons, its good practice to do so on submit being clicked to minimize keypresses to find the first field that has failed validation).

在$错误对象将给未通过验证的所有控件，但它们是由故障的类型在外观上没有窗体上的任何命令进行分组。

The $error object will give all controls that fail validation, but they are grouped by the type of failure not in any order of appearance on the form.

我相信我能想出这样的一些kludged方式。形式，它接收广播的一些重点时，需要设置上的一个指令 - 该指令就可以搜索第一$无效的元素。然而，这似乎很复杂，我想知道这是否是这样做的更好更多的'角'的方式。

I'm sure I can come up with some kludged way of doing this. A directive on the form, which receives some broadcast when focus needs to be set - that directive can then search for the first $invalid element. However this seems very complex and I'd like to know whether these is a better more 'angular' way of doing this.

推荐答案

好了，答案很简单，比我想象的。

Ok, so the answer was simpler than I thought.

所有我需要的是一个指令把窗体本身上，有一个事件处理程序寻找提交事件。那么这可以遍历DOM寻找有它这里的ng-无效类的第一要素。

All I needed was a directive to put on the form itself, with an event handler looking for the submit event. This can then traverse the DOM looking for the first element that has the .ng-invalid class on it.

例使用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();
                }
            });
        }
    };
});

这里的例子使用了一个属性的指令，你可以扩展的例子有这个是元素指令（限制：E），并包括转换成一个模板。然而，这是一个个人的preference。

The example here uses an Attribute directive, you could expand the example to have this be an element directive (restrict: 'E') and include a template that converts this to a . This is however a personal preference.

这篇关于将焦点设置于AngularJs形式第一次输入无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！