Al hacer clic en un botón dentro de un formulario, se actualiza la página

Tengo un formulario en Angular que tiene dos etiquetas de botones. Un botón envía el formulario ng-click. El otro botón es solo para navegación ng-click. Sin embargo, cuando se hace clic en este segundo botón, AngularJS está causando una actualización de la página que activa un 404. He dejado caer un punto de interrupción en la función y está activando mi función. Si hago algo de lo siguiente, se detiene:

1. Si elimino el ng-click, el botón no causa una actualización de la página.
2. Si comento el código en la función, no se actualiza la página.
3. Si cambio la etiqueta del botón a una etiqueta de anclaje ( <a>) con href="", entonces no causa una actualización.

Esta última parece ser la solución más simple, pero ¿por qué AngularJS incluso ejecuta algún código después de mi función que hace que la página se vuelva a cargar? Parece un error.

Aquí está la forma:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

Aquí está el método del controlador:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

Si echa un vistazo a la especificación W3C , parece que lo más obvio es marcar los elementos de su botón type='button'cuando no desea que se envíen.

Lo que hay que tener en cuenta en particular es dónde dice

Un elemento de botón sin atributo de tipo especificado representa lo mismo que un elemento de botón con su atributo de tipo establecido en "enviar"

Puede intentar evitar el controlador predeterminado:

html:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

Debe declarar el atributo ng-submit={expression}en su <form>etiqueta.

De los documentos de ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Habilita las expresiones angulares vinculantes para enviar eventos.

Además, evita la acción predeterminada (que para el formulario significa enviar la solicitud al servidor y volver a cargar la página actual).

Yo uso la directiva para evitar el comportamiento predeterminado:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

Y luego, en html:

<button class="secondaryButton" prevent-default>Secondary action</button>

Esta directiva también se puede usar con <a>y todas las demás etiquetas

Puede mantener <button type="submit">, pero debe eliminar el atributo action=""de <form>.

Me pregunto por qué nadie propuso la solución posiblemente más simple:

no uses un <form>

A <whatever ng-form>IMHO hace un mejor trabajo y sin un formulario HTML, no hay nada que enviar el navegador en sí. Cuál es exactamente el comportamiento correcto cuando se usa angular.

Agregue acción a su formulario.

<form action="#">

Es posible que esta respuesta no esté directamente relacionada con la pregunta. Es solo para el caso cuando envía el formulario utilizando scripts.

De acuerdo con el código ng-submit

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

Agrega el detector de eventos de envío en el formulario. Pero el controlador de eventos de envío no se llamará cuando el envío se inicia llamando a form.submit (). En este caso, ng-submit no impedirá la acción predeterminada, debe llamar a preventDefault usted mismo en el controlador ng-submit;

Para proporcionar una respuesta razonablemente definitiva, el elemento 5 del Algoritmo de envío de formularios HTML establece que un formulario solo envía un evento de envío si no se envió llamando al método de envío (lo que significa que solo envía un evento de envío si se envía mediante un botón u otro método implícito método, por ejemplo, presionar enter mientras el foco está en un elemento de texto de tipo de entrada).

Ver formulario enviado usando submit () desde un enlace no puede ser capturado por el controlador de envío

El primer botón envía el formulario y el segundo no

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

Simplemente agregue el FormsModuleen la importsmatriz de app.module.tsarchivos y agregue import { FormsModule } from '@angular/forms';en la parte superior de este archivo ... esto funcionará.