angularjs - 专注于提交时 .ng-invalid 的第一个字段 - 不适用于 radios-inline

Question

我正在使用 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();
                }
            });
        }
    };
});

只要我不使用内联 radio ，焦点就可以工作。请引用:http://jsfiddle.net/mutharasus/mu7y4k8f/

但如果第一个错误恰好发生在 radio 内联字段上，则焦点不起作用。请引用:http://jsfiddle.net/mutharasus/00jzbL6g/

我不确定如何修复。请帮忙。

Answer 1

radio-inline 将 ng-invalid 类添加到字段标签，而不是每个单独的 radio 输入。

您可以更改该指令并在自定义指令中实现所需的行为(您需要将 ng-invalid 添加到每个 radio 输入)或更改 accessibleForm 指令以检查无效元素是否为一个标签，在这种情况下，找到与其关联的第一个 radio 输入:

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 指令将再次被破坏。