javascript - 我如何关注以声明方式提交的第一个无效表格？

Question

通过查询 DOM 来关注第一个无效表单字段并不是什么大问题。以下是如何做到这一点的很好答案:

Set focus on first invalid input in AngularJs form

Focus on the first field that is .ng-invalid at Submit - not working for radios-inline

它们对我不起作用的原因是我想生成一个与 DOM 解耦的可单元测试的解决方案。

第二个原因是我想以更具声明性的方式进行编码(当然，如果这值得付出努力)。

我试图使用现成的自动对焦 directive ，但您可以提出自己的类似解决方案。

Answer 1

制作可单元测试的可聚焦表单的好主意。

解决方案 AngularJS <1.6

HTML:

<div ng-app="myApp">
  <form novalidate focus-first>
    <div>
      <input focusable ng-model="f1" name="f1" type="text" required />
    </div>
    <input focusable ng-model="f2" name="f2" type="text" required />
    <input type="submit" />
  </form>
</div>

JS:

const app = angular.module('myApp', []);

app.directive('focusable', () => ({
  restrict: 'A', 
  require: '?ngModel',
  link: function(scope, element, attrs, ngModel) {
    ngModel.$$boundElement = element;
  }
}));

app.directive('focusFirst', () => ({
  restrict: 'A',
  link: (scope, element, attrs) => {
    element.on('submit', (event) => {
      event.preventDefault();
      const formCtrl = angular.element(event.target).controller("form");
      const errorKeys = Object.keys(formCtrl.$error);
      if (errorKeys.length > 0) {      
        errorKeys.forEach((errorKey) => {
          // Pretty ugly, it needs to be improved
          const boundElement = formCtrl.$error[errorKeys[0]][0].$$boundElement[0];
          if (boundElement) {
            boundElement.focus();
            // boundElement.scrollIntoView(); // Drive Fiddle crazy
          }
        });
      } else {
        alert('OK !!!');
      }      
    })
  }
}));

这是 fiddle :https://jsfiddle.net/jtassin/60gwL3eh/3/ 这样您就可以避免在 focusMe 指令中使用范围。

解决方案 AngularJS > 1.6

如果您使用的是 angularjs > 1.6，您还可以使用 $$controls 来获取输入，并且不再需要 focusable 指令。 这是 Angular 1.6+ fiddle :https://jsfiddle.net/jtassin/60gwL3eh/5/

HTML:

<div ng-app="myApp">
  <form novalidate focus-first>
    <div>
      <input ng-model="f1" name="f1" type="text" required />
    </div>
    <input ng-model="f2" name="f2" type="text" required />
    <input type="submit" />
  </form>
</div>

JS:

const app = angular.module('myApp', []);

app.directive('focusFirst', () => ({
    restrict: 'A',
  link: (scope, element, attrs) => {
    element.on('submit', (event) => {
      event.preventDefault();
      const formCtrl = angular.element(event.target).controller("form");
      formCtrl.$$controls.some((input) => {
        if (input.$invalid) {
          input.$$element[0].focus();
          return true;
        }
      });            
    })
  }
}));

在这两种解决方案中，在单元测试期间，您可以模拟元素的 focus 方法来检查 focus 调用。