Angular JS - 表单上的取消按钮抑制表单提交答案

【问题标题】：Angular JS - Cancel button on form suppress form submissionAngular JS - 表单上的取消按钮抑制表单提交
【发布时间】：2013-04-16 04:16:53
【问题描述】：

考虑一个包含三个按钮的表单：

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
    <button class="btn" ng-click="cancelEdit()">Cancel</button>
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

当我单击取消时，将调用 cancelEdit()，然后调用 updateUser()。我不希望调用 updateUser() 方法。有没有办法抑制这种表单提交（最好不使用 jQuery？）

注意：我仍然希望能够按 Enter 并默认执行保存操作。

【问题讨论】：

你能不能尝试定义一个type="submit"的按钮，看看是否只有点击那个按钮时才会触发提交？
我删除了 ng-submit 并将 type="submit" 添加到“保存”按钮，然后在专注于文本框时按 Enter 并没有提交我的表单。
如果您在按钮上指定 type="submit"，您的表单上必须有 ng-submit 指令，并且您不需要 ng-click 提交按钮。

标签： angularjs

【解决方案1】：

<button> 有一个 type 属性，默认为 submit - 请参阅 this spec。因此，表单中的每个按钮都是一个提交按钮。您需要为不应触发表单提交的按钮指定 button 类型，如下所示：

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary">Save</button>
    <button type="button" class="btn" ng-click="cancelEdit()">Cancel</button>
    <button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

而且也不需要将提交操作同时提交给ng-click 和ng-submit - 它会触发双重提交。我建议使用ng-submit，因为它可以捕获所有表单提交方式，例如按 ENTER 而不仅仅是单击提交按钮。

希望这会有所帮助:)

【讨论】：

这是最好的答案！
您在这行中找到了答案：There is a type attribute for the <button> which defaults to submit 添加type="button" 是完美的解决方案。谢谢！
type="reset" 可能是<button> 清除表单的最佳类型

【解决方案2】：

试试这个

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary">Save</button>
    <a class="btn" ng-click="cancelEdit()">Cancel</a>
    <a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a>
  </div>
</form>

或者这个

<form>
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
    <button class="btn" ng-click="cancelEdit()">Cancel</button>
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

最终我认为您不需要在 html 中两次使用 updateUser()

【讨论】：

谢谢，这行得通（一旦允许，我就会接受）。第一个解决方案让我在文本区域按回车，所以这是我更喜欢的解决方案。
查看 Shimon Rachlenko 的回答，了解如何通过表单的 ng-submit 指令继续使用 <button> 标记的取消行为。

【解决方案3】：

你可以使用取消按钮 type="reset":

<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>

该按钮是一个重置按钮（将表单数据重置为其初始值）

http://www.w3schools.com/tags/att_button_type.asp

【讨论】：

这会将其重置为空白，而不是恢复到原来的状态
这根本不是重置，
这不起作用，因为它会擦除所有表单数据，以便下次加载表单以编辑信息时所有字段都是空的。最好改用type="button" 解决方案。

【解决方案4】：

我遇到了同样的问题。我使用锚点而不是按钮。

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
<a class="btn btn-danger"  ng-click="cancelEdit()" role="button">Cancel</a>
    <button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>

  </div>
</form>

【讨论】：