wake-up-neo.com

Winkel 2: Das Senden des Formulars wurde abgebrochen, da das Formular nicht verbunden ist

Ich habe ein Modal, das ein Formular enthält. Wenn das Modal zerstört wird, erhalte ich die folgende Fehlermeldung in der Konsole:

Das Senden des Formulars wurde abgebrochen, da das Formular nicht verbunden ist

Das Modal wird zu einem <modal-placeholder>-Element hinzugefügt, das ein direktes untergeordnetes Element von <app-root> ist, meinem obersten Element. 

Was ist der richtige Weg, um ein Formular aus dem DOM zu entfernen und diesen Fehler in Angular 2 zu beseitigen? Ich benutze derzeit componentRef.destroy(); 

45
nick

Es kann andere Gründe dafür geben, aber in meinem Fall hatte ich eine Schaltfläche, die vom Browser als Senden-Schaltfläche interpretiert wurde. Daher wurde das Formular gesendet, als die Schaltfläche angeklickt wurde, die den Fehler verursacht. Durch das Hinzufügen von type = "button" wurde das Problem behoben. Volles Element:

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

Im Formular-Tag sollten Sie Folgendes schreiben:

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

und in dem Formular sollten Sie die Schaltfläche "Senden" haben:

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

Und am wichtigsten, wenn Sie andere Schaltflächen in Ihrem Formular haben, sollten Sie ihnen type="button" hinzufügen. Wenn Sie das standardmäßige type-Attribut Belassen (was ich für submit halte), wird die Warnmeldung ausgegeben.

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

Also bin ich heute eigentlich nur noch mit dem gleichen Problem konfrontiert, es sei denn ohne Modalität. In meinem Formular habe ich zwei Knöpfe. Eine, die das Formular übergibt, und eine, die nach dem Klicken auf die vorherige Seite zurückkehrt.

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

Durch Klicken auf die erste Schaltfläche mit dem RouterLink wird genau das gemacht, was beabsichtigt ist, es wird jedoch offensichtlich auch versucht, das Formular zu übermitteln. Anschließend muss die Formularübermittlung abgebrochen werden, da die Seite, auf der sich das Formular befand, während der Übermittlung aus dem DOM abgemeldet wurde.

Dies scheint genau dasselbe zu sein, was Ihnen passiert, außer mit einem Modal anstelle der gesamten Seite.

Das Problem wird behoben, wenn Sie den Typ der zweiten Schaltfläche direkt als etwas anderes als Senden angeben.

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

Wenn Sie also die Modal-Funktion über die Schaltfläche "Abbrechen" oder etwas anderes schließen, sollte das Problem durch das Festlegen des Typs dieser Schaltfläche (siehe oben) gelöst werden.

16
Darkrender

In dem Formularelement müssen Sie die Submit-Methode (ngSubmit) definieren, etwa: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

auf der Schaltfläche "Submit" können Sie die Klickmethode auslassen, da Ihr Formular jetzt mit der Submit-Methode verbunden ist: <button class="btn btn-success" type="submit">Save</button> Die Schaltfläche sollte vom Typ "Senden" sein.

In dem Code hinter der Komponente implementieren Sie die "onSubmit" -Methode, zum Beispiel wie folgt: onSubmit(value: ICurrency) {...} Diese Methode empfängt ein Wertobjekt mit Werten aus den Formularfeldern.

5
Igor Babic

Falls das Einreichen des Formulars mit der Zerstörung der Komponente einhergeht, schlägt das Einreichen des Formulars im Rennzustand fehl, da das Formular vom DOM getrennt wird. Sagen wir, wir haben

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

Wenn saveData async ist (zum Beispiel die Daten über einen API-Aufruf speichert), können wir auf das Ergebnis warten:

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

Wenn Sie das Formular sofort abbrechen müssen, sollte auch eine Nullverzögerungsmethode funktionieren. Dies garantiert, dass sich die DOM-Trennung nach dem Aufruf der Formularübermittlung in der nächsten Ereignisschleife befindet:

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

Dies sollte unabhängig vom Tastentyp funktionieren.

4
dhilt

Ich hatte dieses Problem vor kurzem und event.preventDefault() hat für mich gearbeitet .. _. Fügen Sie es Ihrer Klickereignismethode hinzu.

0

ich hatte diese Warnung, ich änderte den Knopf-Typ "Submit" zu "Button" Problem gelöst.

0
Shahid Islam

Ich sehe dies in Angular 6, auch wenn keine Schaltflächen zum Senden vorhanden sind. Dies geschieht, wenn sich mehrere Formulare in derselben Vorlage befinden.

0
Nir