Mam modal, który zawiera formularz, po zniszczeniu modalu pojawia się następujący błąd w konsoli:
Przesłanie formularza zostało anulowane, ponieważ formularz nie jest połączony
Modal jest dodawany do <modal-placeholder>
elementu, który jest bezpośrednim dzieckiem <app-root>
mojego elementu najwyższego poziomu.
Jaki jest właściwy sposób usunięcia formularza z DOM i pozbycia się tego błędu w Angular 2? Obecnie używamcomponentRef.destroy();
javascript
html
angular
forms
angular-forms
nacięcie
źródło
źródło
componentRef.destroy();
, dodałem więcej szczegółów do mojego pytania. Dzięki!Odpowiedzi:
Mogą istnieć inne powody, dla których tak się dzieje, ale w moim przypadku miałem przycisk, który został zinterpretowany przez przeglądarkę jako przycisk przesyłania, a zatem formularz został przesłany po kliknięciu przycisku, co spowodowało błąd. Dodanie type = "button" rozwiązało problem. Pełny element:
<button type="button" (click)="submitForm()">
źródło
type="button"
:)W tagu formularza należy wpisać:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
aw formularzu powinien znajdować się przycisk przesyłania:
<button type="submit"></button>
A co najważniejsze, jeśli masz jakieś inne przyciski w swoim formularzu, powinieneś
type="button"
je dodać . Pozostawienie domyślnegotype
atrybutu (który moim zdaniem jestsubmit
) spowoduje wyświetlenie komunikatu ostrzegawczego.<button type="button"></button>
źródło
Tak więc dzisiaj właśnie natknąłem się na dokładnie ten sam problem, z wyjątkiem braku zastosowania modalu. W swojej formie mam dwa przyciski. Jeden, który przesyła formularz, i taki, który po kliknięciu kieruje z powrotem do poprzedniej strony.
<button class="btn btn-default" routerLink="/events">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button>
Kliknięcie pierwszego przycisku z routerem routerLink robi dokładnie to, co powinno, ale również najwyraźniej próbuje przesłać formularz, a następnie musi porzucić przesyłanie formularza, ponieważ strona, na której był formularz, jest odłączana od DOM podczas przesyłania.
Wydaje się, że jest to dokładnie to samo, co dzieje się z tobą, z wyjątkiem tego, że zamiast całej strony pojawia się modal.
Problem zostanie rozwiązany, jeśli bezpośrednio określisz typ drugiego przycisku jako inny niż przesyłanie.
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>
Więc jeśli zamykasz modal za pomocą przycisku „Anuluj” lub czegoś w tym rodzaju, określenie typu tego przycisku, jak pokazano powyżej, powinno rozwiązać problem.
źródło
W elemencie formularza należy zdefiniować metodę przesyłania (ngSubmit), na przykład:
<form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">
a na przycisku przesyłania pomijasz metodę kliknięcia, ponieważ Twój formularz jest teraz połączony z metodą przesyłania:
<button class="btn btn-success" type="submit">Save</button>
Przycisk powinien być typu przesyłania.W kodzie komponentu zaimplementowano metodę "onSubmit", na przykład coś takiego:
onSubmit(value: ICurrency) {
...
}
Ta metoda otrzymuje obiekt wartości z wartościami z pól formularza.źródło
W przypadku, gdy przesłaniu Formularza towarzyszy zniszczenie komponentu, przesłanie Formularza nie powiedzie się w stanie wyścigowym wraz z odłączeniem Formularza od DOM. Powiedz, że mamy
submitForm() { if (this.myForm.invalid) { return; } this.saveData(); // processing Form data this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc }
Gdyby
saveData
jest async (np. Zapisuje dane poprzez wywołanie API) to możemy czekać na wynik:submitForm() { this.saveDataAsync().subscribe( () => this.abandonForm(), (err) => this.processError(err) // may include abandonForm() call ); }
Jeśli musisz natychmiast porzucić formularz, podejście z zerowym opóźnieniem również powinno działać. Gwarantuje to, że odłączenie DOM znajdzie się w następnej pętli zdarzeń po wywołaniu przesłania formularza:
submitForm() { this.saveData(); setTimeout(() => this.abandonForm()); }
Powinno to działać niezależnie od typu przycisku.
źródło
Niedawno miałem ten problem i
event.preventDefault()
pracowałem dla mnie. Dodaj go do metody zdarzenia kliknięcia.<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>
I:
submitForm(event: Event) { event.preventDefault(); // ... }
źródło
Widzę to w Angular 6, nawet bez żadnych przycisków przesyłania. dzieje się, gdy w tym samym szablonie znajduje się wiele formularzy. nie jestem pewien, czy istnieje rozwiązanie / jakie jest rozwiązanie.
źródło
otrzymałem to ostrzeżenie, zmieniłem typ przycisku „wyślij” na „przycisk” rozwiązany problem.
źródło
Jeśli nadal chcesz zachować funkcjonalność przycisku typu „wyślij”, nie powinieneś używać zdarzenia kliknięcia na tym przycisku. Zamiast tego w formularzu należy użyć zdarzenia ngSubmit.
Przykład:
<form (ngSubmit)="destroyComponent()"> <button type="submit">submit</button> </form>
źródło
Być może kierujesz do innej strony w przesłanym formularzu. Korzystaj z programowej nawigacji po trasach, jak w poniższym przykładzie, zamiast przechodzić
routerlink
do szablonu:router.navigate(['/your/router/path'])
źródło