Un clic sur un bouton d'un formulaire entraîne l'actualisation de la page

J'ai un formulaire en angulaire qui contient deux balises de boutons. Un bouton soumet le formulaire ng-click. L'autre bouton est uniquement destiné à la navigation ng-click. Cependant, lorsque ce deuxième bouton est cliqué, AngularJS provoque une actualisation de page qui déclenche un 404. J'ai supprimé un point d'arrêt dans la fonction et il déclenche ma fonction. Si je fais l'une des actions suivantes, cela s'arrête:

1. Si je supprime le ng-click, le bouton ne provoque pas une actualisation de la page.
2. Si je commente le code dans la fonction, cela ne provoque pas un rafraîchissement de la page.
3. Si je change la balise de bouton en balise d'ancrage ( <a>) avec href="", cela ne provoque pas de rafraîchissement.

Ce dernier semble être la solution de contournement la plus simple, mais pourquoi AngularJS exécute-t-il même du code après ma fonction qui provoque le rechargement de la page? On dirait un bug.

Voici le formulaire:

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

Voici la méthode du contrôleur:

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

Si vous jetez un œil à la spécification W3C , il semblerait que la chose la plus évidente à essayer est de marquer vos éléments de bouton type='button'lorsque vous ne voulez pas qu'ils soient soumis.

La chose à noter en particulier est l'endroit où il est dit

Un élément de bouton sans attribut de type spécifié représente la même chose qu'un élément de bouton avec son attribut de type défini sur "soumettre"

Vous pouvez essayer d'empêcher le gestionnaire par défaut:

html:

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

js:

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

Vous devez déclarer l'attribut ng-submit={expression}dans votre <form>balise.

À partir des documents ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit

Permet de lier des expressions angulaires aux événements onsubmit.

De plus, il empêche l'action par défaut (ce qui signifie pour le formulaire l'envoi de la demande au serveur et le rechargement de la page actuelle).

J'utilise la directive pour empêcher le comportement par défaut:

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

Et puis, en html:

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

Cette directive peut également être utilisée avec <a>et toutes les autres balises

Vous pouvez conserver <button type="submit">, mais vous devez supprimer l'attribut action=""de <form>.

Je me demande pourquoi personne n'a proposé la solution peut-être la plus simple:

n'utilisez pas de <form>

A <whatever ng-form>mon humble avis fait un meilleur travail et sans formulaire HTML, il n'y a rien à soumettre par le navigateur lui-même. Quel est exactement le bon comportement lors de l'utilisation angulaire.

Ajoutez une action à votre formulaire.

<form action="#">

Cette réponse peut ne pas être directement liée à la question. C'est juste pour le cas où vous soumettez le formulaire à l'aide de scripts.

Selon le code ng-submit

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

  event.preventDefault();
};

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

Il ajoute soumettre écouteur d'événements sur le formulaire. Mais le gestionnaire d'événements submit ne serait pas appelé lorsque submit est lancé en appelant form.submit (). Dans ce cas, ng-submit n'empêchera pas l'action par défaut, vous devez appeler vous-même preventDefault dans le gestionnaire ng-submit;

Pour fournir une réponse raisonnablement définitive, l'élément 5 de l'algorithme de soumission de formulaire HTML indique qu'un formulaire ne distribue un événement de soumission que s'il n'a pas été soumis en appelant la méthode de soumission (ce qui signifie qu'il ne distribue un événement de soumission que s'il est soumis par un bouton ou un autre moyen implicite). , par exemple en appuyant sur Entrée pendant que le focus est sur un élément de texte de type d'entrée).

Voir le formulaire soumis à l'aide de submit () à partir d'un lien ne peut pas être détecté par le gestionnaire onsubmit

Le premier bouton soumet le formulaire et le second ne le fait pas

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

Ajoutez simplement le FormsModuledans le importstableau de app.module.tsfichiers, et ajoutez import { FormsModule } from '@angular/forms';en haut de ce fichier ... cela fonctionnera.