Forms AngularJS：验证成功后移动到下一个表单输入元素

我已经编写了一个用于验证表单字段的自定义指令。当满足某些条件（即，它是脏的和有效的）时，我希望自动将焦点设置为下一个输入元素。这是我的用户的一个要求，这样他们可以最有效地在表单中移动

简化指令如下所示：

directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel', '^ngController'],
        link: function(scope, element, attrs, ctrls) {
           var model=ctrls[0], form=ctrls[1];

           scope.next = function(){
                return model.$valid
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty){
                    ???
                }
            })

现在我的问题是：我如何识别 -下一个输入元素（下一个同级元素）或可能通过tabindex -并专注于它 不使用Jquery

对于我来说，目前还不清楚如何在没有Jquery的情况下从可用的“scope”或“element”属性访问下一个输入元素；JQlite没有“焦点”方法。基本上，我需要一个替代品来代替？？？在我的代码中

非常感谢您的帮助。谢谢

---

Juergen

AngularJS已经包含了一个轻量级的jQuery版本，因此您也可以使用它。。。

您可以尝试以下方法：

directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel', '^ngController'],
        link: function(scope, element, attrs, ctrls) {
           var model=ctrls[0], form=ctrls[1];

           scope.next = function(){
                return model.$valid
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty){
                    ???
                }
            })

element.next（）.focus（）

---

您可以使用

[0]

从angular/jqLite对象（没有）获取底层

输入

元素（具有

focus（）

函数）

元素。下一步（）.focus（）

如果您有一个复杂的表单，并且输入嵌套在不同的div中，则可能无法工作。 我结束了本指令的编写（此处我将焦点移到Enter上，但可以适应任何事件）：

指令（'entertoab'，函数（$timeout）{ 返回{ 限制：“A”， 链接：函数（范围、元素、属性）{ var procAttr=‘已处理的数据’； $timeout（function（）{//在DOM完全呈现时使用$timeout运行该指令 var formElements=element[0]。querySelectorAll（'input:not（['+procAttr+'=“true”]），select:not（['+procAttr+'=“true”]），textarea:not（['+procAttr+'=“true”]）； //遍历表单中的所有元素 var formElementsLength=formElements.length； 对于（var i=0；i

事件应该在HTML组件中

（按键）=“keyFocus（$Event）”

方法应该类似于

.ts

文件

keyFocus（输入1）{
input1.srcElement.nextElementSibling.focus（）；
}

---

我已经详细说明了我的问题，我尝试了element.next（），但这似乎不起作用。此外，angular.element没有焦点方法。可能

$（element）。next（）.focus（）

可以工作

focus（）

是一个普通的javascript方法。但是“$”是JQuery，不是吗。我正在寻找一个没有Jquery的解决方案。当长度等于3时，它第一次作为例外工作。但是，当我们尝试在文本框中输入时，它也不例外。此外，在最后一个文本框中，它允许在初始时间输入3个以上的字符。它本身按预期工作：当输入的状态从无效变为有效时，下一个输入获得焦点。因此，正如预期的那样，更改早期（有效）文本框不会产生任何效果，除非您首先使该输入无效（例如，通过删除所有内容）。在本例中，有效性为minlength=3，因此允许使用3个以上的字符（此外，没有提到首先禁止无效输入）。如果输入不都在表单的顶层，则不会找到下一个输入！也许，以下内容可能会有所帮助：此代码中阻止了许多有用的“gotcha”：拇指支持：

.directive('enterToTab', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var procAttr = 'data-ett-processed';

      $timeout(function() { // Use $timeout to run the directive when the DOM is fully rendered
        var formElements = element[0].querySelectorAll('input:not([' + procAttr + '="true"]), select:not([' + procAttr + '="true"]), textarea:not([' + procAttr + '="true"])');

        // Run through all elements in form
        var formElementsLength = formElements.length;
        for (var i = 0; i < formElementsLength; i++) {          // Add tabindex attribute
          formElements[i].setAttribute('tabindex', i + 1);

          // Go to next element on Enter key press
          formElements[i].addEventListener('keypress', function(event) {
            if (event.keyCode === 13) { // Enter
              // Prevent Angular from validating all the fields and submitting
              if (event.target.tagName !== 'TEXTAREA') { // Not on textarea, otherwise not possible to add new line
                event.stopPropagation();
                event.preventDefault();
              }

              var nextIndex = parseInt(event.target.getAttribute('tabindex')) + 1;

              // Move focus to next element
              // TODO: find next visible element
              var nextElem = element[0].querySelector('[tabIndex="' + (nextIndex) + '"]');

              if (nextElem) {
                nextElem.focus();
              }
            }
          });
          formElements[i].setAttribute(procAttr, true); // Add attribute to prevent adding 2 listeners on same element
        }
      });
    }
  };
});