javascript - 是否可以覆盖 ng-submit？

Question

我正在寻找一种覆盖 ng-submit 的方法，以便它在评估/运行它包含的表达式之前执行一些功能。例如，我想执行以下操作。

1) 将所有字段设置为脏(或可能已触及)，这样即使用户跳过了所有字段，所有字段也会得到验证。

2) 检查所有字段是否有效。如果不是，则不要继续。

3) 如果有任何字段无效，则滚动第一个无效字段并将其聚焦。

我发现了一些执行此操作的指令，一些创建了新的元素指令，但没有一个实际上覆盖/扩展 ngSubmit，所以我想知道这是否可能？

Answer 1

首先，无需“触摸”元素即可进行验证(这是关于第 1 点)。例如，这将使输入无效，给定 $scope.test = "abcd"; 和:

<input ng-model="test" ng-maxlength="3">

其次，#2 很容易通过 form.$valid 实现:

<form name="form1" ng-submit="form1.$valid && onSubmit()">
  ...
</form>

如果预提交逻辑比这更复杂，它可以/应该在 Controller 中完成，例如，在 onSubmit() 函数中。

但是，如果您的预提交逻辑与 View 相关(而不是与 ViewModel 相关)——并且滚动是与 View 相关——那么您可以创建另一个 ngSubmit 具有更高优先级的指令并阻止默认提交事件处理:

.directive("ngSubmit", function() {
  return {
    require: "?form",
    priority: 10,
    link: {
      pre: function(scope, element, attrs, form) {
        element.on("submit", function(event) {        
          if (form && !form.$valid) {
            event.stopImmediatePropagation();
            event.preventDefault();

            // do whatever you need to scroll here
          }
        })
      }
    }
  }
});

Demo

编辑:

由于链接函数执行的顺序，这里使用 pre-link 很重要。执行顺序是:

1. pre-link of parent or higher priority directive
2. pre-link of child or lower priority directive
3. post-link of child or lower priority directive
4. post-link of parent or higher priority directive

因此，使用更高的优先级和 pre-link 确保该指令在内置的之前注册 element.on("submit", ...) ngSubmit 执行此操作，因此它可以先进行事件处理。