gpt4 book ai didi

validation - 将焦点设置在 AngularJs 表单中的第一个无效输入上

转载 作者:行者123 更新时间:2023-12-02 23:19:40 24 4
gpt4 key购买 nike

我读过几篇与 AngularJs 中焦点设置相关的文章和 StackOverflow 问题。

不幸的是,我读过的所有示例都假设我可以向元素添加一些属性来获得焦点,例如一个focusMe directive .

但是,如果我事先不知道将焦点设置到哪个输入怎么办?特别是如何将焦点设置到具有 $invalid 集的表单中的第一个输入元素 - 即验证失败的元素。可能有多个输入无法验证,因此我无法使用仅尝试基于此调用 .focus() 的指令。 (我这样做是出于辅助功能/WCAG 的原因,在单击提交时这样做是一种很好的做法,可以最大限度地减少按键次数,从而找到第一个验证失败的字段。

$error 对象将提供所有验证失败的控件,但它们按失败类型分组,而不是按表单上出现的任何顺序。

我确信我可以想出一些笨拙的方法来做到这一点。表单上的指令,当需要设置焦点时接收一些广播 - 然后该指令可以搜索第一个 $invalid 元素。然而,这似乎非常复杂,我想知道这是否是一种更好的更有“Angular ”的方法。

最佳答案

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

我所需要的只是一个放在表单本身上的指令,以及一个寻找提交事件的事件处理程序。然后可以遍历 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”)并包含一个将其转换为 .但这是个人喜好。

关于validation - 将焦点设置在 AngularJs 表单中的第一个无效输入上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20365121/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com