专注于提交时 .ng-invalid 的第一个字段 - 不适用于 radios-inline
Focus on the first field that is .ng-invalid at Submit - not working for radios-inline
我正在使用 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/00jzbL6g/
我不知道如何解决。请帮忙。
我认为问题在于每个收音机的标签都有“.ng-invalid”class,但收音机输入元素本身却没有,无论如何都会出现。您的查询选择器无意中返回了标签的元素,然后在其上无用地调用了 focus()'。
如果无线电无效,这是调用焦点的元素:
<label ng-model="model['Field1']" ng-model-options="form.ngModelOptions" schema-validate="form" class="control-label ng-valid-schema-form ng-dirty ng-invalid ng-invalid-tv4-302" ng-show="showTitle()">Field1</label>
其他类型控件的标签没有.ng-invalid class 所以他们不会被这个问题困扰。
我不熟悉这些库,所以答案视情况而定。改进选择器或更改单选输入标签的样式。
Here's a version of the jsFiddle 我已经破解以证明它是阻止焦点发生的选择器。只需点击提交,无需更改表格。
radio-inline
正在将 ng-invalid
class 添加到字段标签而不是每个单独的无线电输入。
您可以更改该指令并在您的自定义指令中实现您想要的行为(您需要将 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
指令将再次被破坏。
我正在使用 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/00jzbL6g/
我不知道如何解决。请帮忙。
我认为问题在于每个收音机的标签都有“.ng-invalid”class,但收音机输入元素本身却没有,无论如何都会出现。您的查询选择器无意中返回了标签的元素,然后在其上无用地调用了 focus()'。
如果无线电无效,这是调用焦点的元素:
<label ng-model="model['Field1']" ng-model-options="form.ngModelOptions" schema-validate="form" class="control-label ng-valid-schema-form ng-dirty ng-invalid ng-invalid-tv4-302" ng-show="showTitle()">Field1</label>
其他类型控件的标签没有.ng-invalid class 所以他们不会被这个问题困扰。
我不熟悉这些库,所以答案视情况而定。改进选择器或更改单选输入标签的样式。
Here's a version of the jsFiddle 我已经破解以证明它是阻止焦点发生的选择器。只需点击提交,无需更改表格。
radio-inline
正在将 ng-invalid
class 添加到字段标签而不是每个单独的无线电输入。
您可以更改该指令并在您的自定义指令中实现您想要的行为(您需要将 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
指令将再次被破坏。