Winkel 2: Formularübermittlung abgebrochen, da das Formular nicht verbunden ist

Ich habe ein Modal, das ein Formular enthält. Wenn das Modal zerstört wird, wird in der Konsole der folgende Fehler angezeigt:

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

Das Modal wird einem <modal-placeholder>Element hinzugefügt, das direkt <app-root>meinem untergeordneten Element untergeordnet ist.

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

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, und daher wurde das Formular gesendet, als auf die Schaltfläche geklickt wurde, was den Fehler verursachte. Durch Hinzufügen von type = "button" wurde das Problem behoben. Vollständiges Element:

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

In das Formular-Tag sollten Sie Folgendes schreiben:

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

und innerhalb des Formulars sollten Sie die Schaltfläche "Senden" haben:

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

Und vor allem, wenn Sie andere Schaltflächen in Ihrem Formular haben, sollten Sie type="button"diese hinzufügen . Das Verlassen des Standardattributs type(was ich denke submit) führt zur Warnmeldung.

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

Also bin ich heute tatsächlich auf genau das gleiche Problem gestoßen, außer ohne Modal. In meinem Formular habe ich zwei Schaltflächen. Eine, die das Formular sendet, und eine, die beim Klicken zur vorherigen Seite zurückleitet.

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

Das Klicken auf die erste Schaltfläche mit dem RouterLink bewirkt genau das, was es soll, versucht aber anscheinend auch, das Formular zu senden, und muss dann die Formularübermittlung abbrechen, da die Seite, auf der sich das Formular befand, während der Übermittlung vom DOM abgemeldet wird.

Dies scheint genau das gleiche 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 das Modal über eine Schaltfläche "Abbrechen" oder etwas Ähnliches schließen, sollte die Angabe des oben gezeigten Typs dieser Schaltfläche Ihr Problem lösen.

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

und auf der Schaltfläche "Senden" lassen Sie die Klickmethode weg, da Ihr Formular jetzt mit der Methode "Senden" 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 Methode "onSubmit", zum Beispiel: onSubmit(value: ICurrency) { ... } Diese Methode empfängt ein Wertobjekt mit Werten aus den Formularfeldern.

Für den Fall, dass das Absenden des Formulars mit der Zerstörung der Komponente einhergeht, schlägt das Absenden des Formulars unter Race-Bedingungen fehl, wenn 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 saveDataes asynchron ist (zum Beispiel werden die Daten per API-Aufruf gespeichert), 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 verlassen müssen, sollte auch ein Ansatz ohne Verzögerung funktionieren. Dies garantiert, dass sich die DOM-Trennung in der nächsten Ereignisschleife befindet, nachdem die Formularübermittlung aufgerufen wurde:

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

Dies sollte unabhängig vom Schaltflächentyp funktionieren.

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

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

Und:

submitForm(event: Event) {
  event.preventDefault();
  // ...
}

Ich sehe dies in Angular 6, auch ohne Submit-Buttons. tritt auf, wenn mehrere Formulare in derselben Vorlage vorhanden sind. Ich bin mir nicht sicher, ob es eine Lösung gibt / was die Lösung ist.

Ich hatte diese Warnung, ich änderte den Schaltflächentyp "Senden" in "Schaltfläche" Problem gelöst.

Wenn Sie weiterhin die Funktionalität der Schaltfläche vom Typ "Senden" beibehalten möchten, sollten Sie das Klickereignis für diese Schaltfläche nicht verwenden. Verwenden Sie stattdessen das Ereignis ngSubmit im Formular.

Beispiel:

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>

Möglicherweise leiten Sie bei der Übermittlung Ihres Formulars eine andere Seite weiter. Verwenden Sie die programmatische Routennavigation wie im folgenden Beispiel, anstatt routerlinkin die Vorlage zu wechseln:

router.navigate(['/your/router/path'])