将重点放在AngularJs表单中的第一个无效输入上

Question

我已经阅读了几篇有关AngularJs的焦点设置的文章和StackOverflow问题。

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

但是，如果我事先不知道将焦点设置为哪个输入怎么办？特别是如何将焦点设置为具有$ invalid集的表单中的第一个输入元素-即未通过验证的元素。可能有几个输入未通过验证，因此我不能使用仅以此为基础尝试调用.focus（）的指令。（我这样做是出于可访问性/WCAG的原因，它的优良作法是在单击提交以最大程度地减少按键以查找未通过验证的字段时这样做）。

$ error对象将提供所有未通过验证的控件，但它们会按照失败的类型而不是在表单上出现的顺序进行分组。

我敢肯定，我可以想出一些行之有效的方法。表单上的伪指令，当需要设置焦点时会接收一些广播-该伪指令可以搜索第一个$invalid元素。但是，这似乎非常复杂，我想知道这些是否是更好的“角度”实现方式。

Answer 1

您也可以使用angular.element

angular.element('input.ng-invalid').first().focus();

视图

<form name="myForm" novalidate="novalidate" data-ng-submit="myAction(myForm.$valid)" autocomplete="off"></form>

控制者

$scope.myAction= function(isValid) {
    if (isValid) {
        //You can place your ajax call/http request here
    } else {
        angular.element('input.ng-invalid').first().focus();
    }
};

使用ngMessages进行验证

没有jQuery的方式

angular.element($document[0].querySelector('input.ng-invalid')).focus();

使用此方法时，需要$document在角度控制器中作为参数传递

angular.module('myModule')
.controller('myController', ['$document', '$scope', function($document, $scope){
    // Code Here
}]);