web-dev-qa-db-fra.com

Angular 2: soumission du formulaire annulée car le formulaire n'est pas connecté

J'ai un modal qui contient un formulaire. Lorsque le modal est détruit, l'erreur suivante apparaît dans la console:

Envoi du formulaire annulé car le formulaire n'est pas connecté

Le modal est ajouté à un élément <modal-placeholder> qui est un enfant direct à <app-root>, mon élément de niveau supérieur. 

Quelle est la bonne façon de supprimer un formulaire du DOM et de supprimer cette erreur dans Angular 2? J'utilise actuellement componentRef.destroy(); 

javascripthtmlangularformsangular-forms
45
nick

Il peut y avoir d'autres raisons à cela, mais dans mon cas, le navigateur avait interprété un bouton comme un bouton d'envoi. Le formulaire a donc été soumis lorsque l'utilisateur a cliqué sur le bouton, ce qui a provoqué l'erreur. L'ajout de type = "bouton" corrige le problème. Élément complet:

    <button type="button" (click)="submitForm()">
101
Erik Lindblad

Dans la balise de formulaire, vous devez écrire ce qui suit:

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

et à l'intérieur du formulaire, vous devriez avoir le bouton d'envoi:

 <button type="submit"></button>

Et surtout, si vous avez d’autres boutons dans votre formulaire, vous devez leur ajouter type="button". Laisser l'attribut par défaut type (Que je pense être submit) provoquera le message d'avertissement.

<button type="button"></button>
40
Nour

Donc, en fait, je viens de rencontrer exactement le même problème aujourd'hui, sauf si un modal est impliqué. Dans ma forme, j'ai deux boutons. Celui qui envoie le formulaire et l’autre qui, une fois cliqué, retourne à la page précédente.

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

En cliquant sur le premier bouton avec routerLink, on fait exactement ce qui est supposé, mais on essaie aussi apparemment de soumettre le formulaire. Il faut ensuite abandonner la soumission du formulaire, car la page sur laquelle le formulaire était est démontée du DOM.

Cela semble être exactement la même chose qui vous arrive, sauf avec un modal au lieu de la page entière.

Le problème est résolu si vous spécifiez directement le type du deuxième bouton comme étant autre chose que soumettre.

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

Ainsi, si vous fermez le modal via un bouton 'Annuler' ou quelque chose du genre, spécifier le type de ce bouton, comme indiqué ci-dessus, devrait résoudre votre problème.

16
Darkrender

Dans l'élément de formulaire, vous devez définir la méthode d'envoi (ngSubmit), par exemple: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

et sur le bouton d'envoi, vous omettez de cliquer sur la méthode, car votre formulaire est maintenant connecté à la méthode d'envoi: <button class="btn btn-success" type="submit">Save</button> Le bouton doit être du type submit.

Dans le composant code behind, vous implémentez la méthode "onSubmit", par exemple quelque chose comme ceci: onSubmit(value: ICurrency) {...} Cette méthode reçoit un objet de valeur avec les valeurs des champs de formulaire.

5
Igor Babic

Dans le cas où la soumission du formulaire est accompagnée de la destruction du composant, la soumission du formulaire échoue en condition de concurrence avec le détachement du formulaire du DOM. Dis, nous avons

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

Si saveData est asynchrone (par exemple, il enregistre les données via un appel API), nous pouvons attendre le résultat:

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

Si vous devez abandonner le formulaire immédiatement, une approche sans délai devrait également fonctionner. Cela garantit que le détachement du DOM sera dans la prochaine boucle d'événements après l'appel de la soumission du formulaire:

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

Cela devrait fonctionner quel que soit le type de bouton.

4
dhilt

J'ai eu ce problème récemment et event.preventDefault() a travaillé pour moi . Ajoutez-le à votre méthode d'événement click.

0
Abubakar Ibrahim

j'ai eu cet avertissement, j'ai changé le type de bouton "soumettre" en "bouton" problème résolu.

0
Shahid Islam

Je vois ceci dans Angular 6, même sans boutons de soumission du tout .. Il se passe quand il y a plusieurs formulaires dans le même modèle ... Je ne sais pas s'il existe une solution/quelle est la solution.

0
Nir