专注于在提交时.ng无效的第一个字段-不适用于radios-inline [英] Focus on the first field that is .ng-invalid at Submit - not working for radios-inline

问题描述

我正在使用设置焦点上的可接受答案中的指令在AngularJs形式的第一个无效输入上来完成此操作:

I am using the directive from accepted answer on Set focus on first invalid input in AngularJs form to accomplish this:

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/

As long as I do not use radios-inline the focus works. Please refer: http://jsfiddle.net/mutharasus/mu7y4k8f/

但是，如果第一个错误恰好是在radios-inline字段上，则焦点将不起作用.请参考: http://jsfiddle.net/mutharasus/00jzbL6g/

But if the first error happens to be on a radios-inline field the focus does not work. Please refer: http://jsfiddle.net/mutharasus/00jzbL6g/

我不确定如何解决.请帮忙.

I am not sure how to fix. Please help.

推荐答案

radio-inline正在将ng-invalid类添加到字段标签，而不是添加到每个单独的无线电输入.

The radio-inline is adding the ng-invalid class to the field label instead of to each individual radio input.

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

You could change that directive and implement your desired behaviour in your custom one (you would need to add ng-invalid to each radio input) or change the accessibleForm directive to check if the invalid element is a label and, in that case, find the the first radio input associated to it:

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

Although it may seem like the easiest solution, it does not look right for me to have that second query selector that depends so much on the structure of that specific directive, as if that changes then the accessibleForm directive will be broken again.

这篇关于专注于在提交时.ng无效的第一个字段-不适用于radios-inline的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！