Angular: Formulaire : la page se recharge lorsque NgForm est supprimé/restauré via NgIf

Créé le 1 févr. 2016 · 3Commentaires · Source: angular/angular

Bizarre mais se leva innocemment.

J'ai essayé d'implémenter la fonction de réinitialisation de formulaire (manquante) en faisant basculer le formulaire précédent hors du DOM et en le rétablissant avec un NgIf épinglé à un indicateur active

<form *ngIf="active" 
          (ngSubmit)="onSubmit()" #heroForm="ngForm">

contrôlé par la méthode du composant clear comme celle-ci

  clear() {
    this.model = new Hero(42, '', '');
    this.active = false;
    setTimeout(()=> this.active=true, 0);
  }

Lorsque le formulaire est valide (comme au début), cliquer sur effacer provoque un rechargement de la page. Si le formulaire n'est pas valide (par exemple, pas de nom), il n'y a pas de rechargement.

Voici une reproduction via plunker :
http://plnkr.co/edit/GNhLbONEDHyApCm9vUeh

Source

wardbell

👍1

Commentaire le plus utile

Le bouton effacer a le type "soumettre". En cliquant dessus, le formulaire est donc soumis. NgForm est censé intercepter l'événement de soumission, mais comme NgIf supprime l'élément de formulaire du DOM, l'interception ne se produit pas. Vous pouvez le corriger en définissant le type de bouton sur "bouton".

vsavkin le 1 févr. 2016

👍2 🎉1

Tous les 3 commentaires

vsavkin le 1 févr. 2016

👍2 🎉1

Merci. Je ne savais pas qu'un <button> _sans attribut de type _ était identique à un bouton de soumission !
Cela résout le problème comme on le voit dans ce plunker révisé : http://plnkr.co/edit/u3ltLP84JHn2VkoFKf46?p=preview

Fermeture de ce problème et ouverture de #6822 qui appelle à une fonctionnalité explicite reset pour remplacer le hack illustré par ce plunker.

wardbell le 1 févr. 2016

👍1

Ce problème a été automatiquement verrouillé en raison de l'inactivité.
Veuillez déposer un nouveau problème si vous rencontrez un problème similaire ou connexe.

En savoir plus sur notre politique de verrouillage automatique des conversations .

_{_Cette action a été effectuée automatiquement par un bot._}