我正在使用已接受答案中的指令将焦点设置在 AngularJs 表单中的第一个无效输入上 https://stackoverflow.com/questions/20365121/set-focus-on-first-invalid-input-in-angularjs-form为了实现这一点：
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
console.log("inside focus directive");
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
//if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
只要我不使用内联无线电，焦点就可以工作。请参考：http://jsfiddle.net/mutharasus/mu7y4k8f/ http://jsfiddle.net/mutharasus/mu7y4k8f/
但是，如果第一个错误恰好发生在无线电内联字段上，则焦点不起作用。请参考：http://jsfiddle.net/mutharasus/00jzbL6g/ http://jsfiddle.net/mutharasus/00jzbL6g/
我不知道如何修复。请帮忙。
The radio-inline正在添加ng-invalid类到字段标签而不是每个单独的无线电输入。
您可以更改该指令并在自定义指令中实现您想要的行为（您需要将 ng-invalid 添加到每个无线电输入）或更改accessibleForm指令检查无效元素是否是标签，在这种情况下，找到与其关联的第一个无线电输入：
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
console.log("inside focus directive");
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// If we got a label, then it is a radio-inline
if(firstInvalid && firstInvalid.tagName === 'LABEL') {
firstInvalid = elem[0].querySelector('.ng-invalid + div input[type=radio]')
}
firstInvalid && firstInvalid.focus();
});
}
};
});
尽管它看起来像是最简单的解决方案，但对我来说，拥有第二个查询选择器看起来不太合适，它很大程度上依赖于该特定指令的结构，就好像它改变了然后accessibleForm指令将再次被破坏。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
