Question

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

1）将所有字段设置为脏（或可能触摸），以便即使用户已跳过它们，也会验证所有字段。

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

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

我找到了一些执行其中一些操作的指令，有些指令创建了新的元素指令，但没有实际覆盖/扩展ngSubmit，所以我想知道这是否可行？

Answer 1

首先，不需要触摸元素＆＃34;用于验证工作（关于＃1点）。例如，这会使输入无效，给定$scope.test = "abcd";和：

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

其次，使用form.$valid：

可以轻松实现＃2

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

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

但是，如果您的预提交逻辑与View相关（而不是与ViewModel相关） - 并且滚动与视图相关 - 那么您可以创建另一个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 - 链接在这里很重要，因为链接功能的执行顺序。执行顺序是：

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，因此它可以首先执行事件处理

Answer 2

这段代码应该让你开始，因为它解决了第1,2条的标准，并为你提供了一个数字3的钩子。

至于滚动到无效字段，我还没有尝试/需要，但听起来很有趣。我想你可以真正无聊并创建一个完整的“表单包装指令”，虽然看起来有点矫枉过正..

我只想使用可在我的控制器中调用的服务方法。您是否只想滚动到第一个无效字段并将其聚焦？

模板

<!-- Form Template -->
<form name="form" novalidate ng-submit="vm.submit(form.$valid, vm.data)">
    <input type="text"
           name="blah"
           ng-model="vm.data.blah"
           ng-model-options="{debounce: {'default': 300, blur: 0}}"
           required
           formnovalidate/>
     <div ng-messages="form.blah.$error"
          ng-messages-include="messages.html"
          ng-if="form.$submitted || form.blah.$touched">
     </div>
    <button type="submit">Submit</button>
</form>

<!-- messages.html -->
<div ng-message="required">This field is required</div>

控制器

vm.data = {};
vm.submit = function(isValid, data) {
    if (!isValid) { 
        //Scroll to bad field
        return; 
    }
    // Do form submission via service
};

是否可以覆盖ng-submit？

2 个答案:

模板

控制器