Question

考虑一个带有三个按钮的表单：

<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键并默认为保存操作。

Answer 1

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

<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键，而不是单击提交按钮。

希望这会有所帮助：）

Answer 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()两次

Answer 3

您可以使用取消按钮类型=“重置”：

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

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

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

Answer 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>

Angular JS - 表单禁止表单提交上的取消按钮

4 个答案: