angularjs - example - Angular JS: botón Cancelar en el formulario para suprimir el envío del formulario

ngmodel

Question

Considere un formulario con tres botones:

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

Cuando hago clic en cancelar, se llama a cancelEdit () y luego a updateUser (). No quiero que se llame al método updateUser (). ¿Hay alguna forma de suprimir el envío de este formulario (preferiblemente sin jQuery?)

Nota: todavía me gustaría poder pulsar Intro y predeterminado en la acción Guardar.

Answer 1

Estaba teniendo el mismo problema. Usé el ancla en lugar del botón.

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

Answer 2

Hay un atributo de type para el <button> que se envía de forma predeterminada; consulte esta especificación . Por lo tanto, cada botón en su formulario es un botón de envío . Debe especificar el tipo de botón para los botones que no deben activar el envío del formulario, como esto:

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

Y tampoco es necesario poner la acción de envío tanto a ng-click como a ng-submit , se activará el envío doble. Recomendaría utilizar ng-submit porque detecta todas las formas de envío de formularios, como presionar ENTER y no solo hacer clic en el botón enviar.

Espero que esto ayude :)

Answer 3

Prueba esto

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

o esto

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

en última instancia, no creo que necesite updateUser() dos veces en el html

Answer 4

Puede usar para el botón de cancelar tipo = "reiniciar":

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

El botón es un botón de reinicio (restablece los datos de formulario a sus valores iniciales)

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