Angular.js: ngSubmit 在没有 type="button" 的任何按钮上触发表单提交

创建于 2014-01-28 · 13评论 · 资料来源: angular/angular.js

我刚遇到一个问题，angular 提交了我的表单两次。

        <div class="text-center">
          <input type="submit" class="btn btn-primary" value="Create" />
          <button class="btn btn-primary" ng-click="close()">Close</button>
        </div>

这里的两个按钮都提交表单，导致重复提交。我意识到问题与在任何不是 type="button" 的按钮上提交表单有关。将该属性添加到关闭按钮可修复它。我不知道这是不是有意为之，但它让我感到困惑，直到我想通了，所以决定引起人们的注意。

forms low inconvenient

资料来源

parliament718

👍21

最有用的评论

我只是浪费了几个小时...

ng-submit 应该只为 type="submit" 明确设置的按钮触发。

soichih 于 2014-07-31

👍81 👎6 ❤5

所有13条评论

我认为这是在 th docs 中解释的，尽管没有提到您可以通过 puttint type="button" 阻止提交：

如果表单有一个或多个输入字段和一个或多个按钮或 input[type=submit] 则在任何输入字段中按 Enter 将触发第一个按钮上的点击处理程序或 input type=submit和一个提交处理程序附表 (ngSubmit)

Narretz 于 2014-01-28

👍43 ❤8 🎉4 👀1

我只是浪费了几个小时...

ng-submit 应该只为 type="submit" 明确设置的按钮触发。

soichih 于 2014-07-31

👍81 👎6 ❤5

那是.... 不是 html 的工作原理吗？

caitp 于 2014-07-31

👍12

哦，所以这只是 HTML 表单默认将任何按钮作为提交按钮处理的方式..与 Angular 无关（并且 Angular 使用表单提交事件来触发 ng-submit - 这是有道理的）。我想知道为什么 type="submit" 必须存在呢？

无论如何.. 我会确保在所有按钮上添加 type="button" ，除非它是提交按钮。

soichih 于 2014-07-31

👍23 😄3

@soichih - 是的，你是对的。 ngSubmit 只是对提交事件做出反应，浏览器负责触发它。

实际上有许多场景可能会发生这种情况。

为防止处理程序的双重执行，请仅使用 ngSubmit 或 ngClick 指令之一。这是因为 HTML 规范中的以下表单提交规则：
如果表单只有一个输入字段，则在此字段中按 Enter 会触发表单提交 (ngSubmit)
如果表单有 2 个以上的输入字段且没有按钮或 input[type=submit]，则按 Enter 不会触发提交
如果表单有一个或多个输入字段和一个或多个按钮或 input[type=submit] 则在任何输入字段中按 Enter 将触发第一个按钮上的点击处理程序或 input type=submit和一个提交处理程序附表 (ngSubmit)

它记录在这里： https :
我们应该在 ngSubmit 文档中复制或更明确地引用它。