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

Question

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();

Answer 1

Il peut y avoir d'autres raisons pour que cela se produise, mais dans mon cas, j'avais un bouton qui a été interprété par le navigateur comme un bouton d'envoi et le formulaire a donc été soumis lorsque le bouton a été cliqué, ce qui a provoqué l'erreur. L'ajout de type = "bouton" corrige le problème. Élément complet:

     <button type="button" (click)="submitForm()">
 

Answer 2

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" . Si vous laissez l'attribut par défaut type (que je pense être submit ), le message d'avertissement s'affichera.

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

Answer 3

Donc en fait je viens de tomber sur exactement le même problème aujourd'hui, à l'exception sans modale impliqués. Dans mon formulaire, j'ai deux boutons. Celui qui soumet le formulaire et qui, lorsqu'il est cliqué, les voies de retour à 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 le routerLink fait exactement ce que son supposé, mais aussi, apparemment, tente de soumettre le formulaire, puis a dû abandonner le formulaire de soumission, car la page que le formulaire a été sur la montée du DOM au cours de soumission.

Cela semble être exactement la même chose qui se passe pour vous, sauf avec un modal au lieu de la totalité de la page.

Le problème devient fixe si vous spécifiez le type de la deuxième bouton à être autre chose que de se soumettre.

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

Donc, si vous êtes de fermer la modale par l'intermédiaire d'un bouton "Annuler" ou quelque chose du genre, en précisant que le bouton du type, comme indiqué ci-dessus, devrait permettre de résoudre votre problème.

Answer 4

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

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

Dans le code de composant que vous mettre en œuvre "onSubmit" la méthode, par exemple quelque chose comme ceci: onSubmit(value: ICurrency) { ... } Cette méthode est la réception d'un objet de valeur avec les valeurs des champs du formulaire.

Answer 5

Dans le cas où la soumission du Formulaire est accompagné par le composant est en train de détruire, le Formulaire de soumission échoue en condition de course avec le détachement de la Forme de la DOM. Dire, 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 l'API d'appel), alors nous pouvons attendre le résultat:

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

Si vous avez besoin d'abandonner la Forme immédiatement, un zéro-délai approche devrait également travailler. Ceci garantit le DOM détachement sera dans la prochaine boucle d'événements après la soumission du Formulaire a été appelé:

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

Cela devrait fonctionner quel que soit le type de bouton.