Angular JS - кнопка отмены при подаче формы подавления формы

Рассмотрим форму с тремя кнопками:

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

Когда я нажимаю cancel, вызывается cancelEdit(), то вызывается updateUser(). Я не хочу, чтобы вызывался метод updateUser(). Есть ли способ подавить эту форму представления (предпочтительнее wtihout jQuery?)

Примечание. Я все равно хотел бы нажать Enter и по умолчанию выполнить действие "Сохранить".

Ответы

Ответ 1

Существует атрибут type для <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, а не только на кнопку отправки.

Надеюсь, что это поможет:)

Ответ 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>

В конечном счете, я не думаю, что вам нужно updateUser() дважды в html

Ответ 3

Вы можете использовать для кнопки отмены типа = "reset":

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

Кнопка представляет собой кнопку reset (сбрасывает данные формы до ее начальных значений)

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

Ответ 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>