Saya memiliki modal yang berisi formulir, ketika modal dihancurkan saya mendapatkan error berikut di console:
Formulir pengajuan dibatalkan karena form ini tidak terhubung
Modal ditambahkan ke <modal-tempat>
elemen yang merupakan anak langsung ke <aplikasi-root>
, saya atas tingkat elemen.
Apa's cara yang benar untuk menghilangkan bentuk dari DOM dan menyingkirkan kesalahan ini dalam Sudut 2? Saat ini saya menggunakan componentRef.menghancurkan();
Mungkin ada alasan lain ini terjadi tapi dalam kasus saya, saya memiliki sebuah tombol yang ditafsirkan oleh browser sebagai tombol kirim dan karenanya bentuk itu disampaikan ketika tombol diklik menyebabkan kesalahan. Menambahkan type="tombol" tetap masalah. Penuh elemen:
<button type="button" (click)="submitForm()">
Di tag form anda harus menulis sebagai berikut:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
dan dalam formulir anda harus memiliki tombol kirim:
<button type="submit"></button>
Dan yang paling penting, jika anda memiliki tombol lain dalam bentuk anda anda harus menambahkan type="tombol"
untuk mereka. Meninggalkan default jenis
atribut
(yang saya pikir adalah submit
) akan menyebabkan pesan peringatan.
<button type="button"></button>
Jadi saya benar-benar hanya berlari ke dalam masalah yang sama persis hari ini kecuali tanpa modal yang terlibat. Di formulir saya, saya memiliki dua tombol. Salah satu yang menyerahkan formulir dan salah satu yang, ketika diklik, rute kembali ke halaman sebelumnya.
<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
Mengklik pada tombol pertama dengan routerLink tidak persis apa yang seharusnya, tetapi juga tampaknya mencoba untuk mengirimkan formulir juga, dan kemudian harus meninggalkan formulir pengajuan karena halaman yang berupa berada di unmount dari DOM selama pengajuan.
Hal ini tampaknya menjadi hal yang sama persis yang terjadi pada anda, kecuali dengan modal bukan dari seluruh halaman.
Masalah menjadi tetap jika anda langsung menentukan jenis tombol kedua untuk menjadi sesuatu yang lain dari submit.
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>
Jadi jika anda menutup modal melalui 'Membatalkan' tombol atau sesuatu semacam itu, menetapkan bahwa tombol's type, seperti yang ditunjukkan di atas, harus memecahkan masalah anda.
Dalam bentuk elemen yang anda butuhkan untuk menentukan menyerahkan metode (ngSubmit), sesuatu seperti:
<form id="mata uang-mengedit" (ngSubmit)="onSubmit(f.nilai)" #f="ngForm">
dan pada tombol kirim anda mengabaikan klik metode, karena formulir anda sekarang terhubung ke submit metode:
<tombol class="btn btn-sukses" type="kirim">Save</tombol>
tombol harus mengirimkan jenis.
Dalam kode di belakang komponen anda menerapkan "onSubmit" metode, misalnya seperti ini:
onSubmit(nilai: ICurrency) {
...
}
Metode ini menerima nilai objek dengan nilai-nilai dari kolom formulir.
Dalam kasus yang mengirimkan Formulir yang disertai oleh komponen's menghancurkan, Bentuk mengirimkan gagal dalam kondisi balapan dengan memisahkan Bentuk dari DOM. Katakanlah, kita memiliki
submitForm() {
if (this.myForm.invalid) {
return;
}
this.saveData(); // processing Form data
this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}
Jika saveData
adalah async (misalnya menyimpan data melalui API call) maka kita dapat menunggu hasilnya:
submitForm() {
this.saveDataAsync().subscribe(
() => this.abandonForm(),
(err) => this.processError(err) // may include abandonForm() call
);
}
Jika anda perlu untuk meninggalkan Bentuk segera, tanpa penundaan pendekatan juga harus bekerja. Ini adalah DOM detasemen untuk berada di samping acara loop setelah Formulir pengajuan ini telah disebut:
submitForm() {
this.saveData();
setTimeout(() => this.abandonForm());
}
Ini harus bekerja terlepas dari jenis tombol.
Aku punya masalah ini baru-baru ini dan acara.preventDefault()
bekerja untuk saya.
Menambahkannya ke acara klik metode.
<button type="kirim" (klik)="submitForm($hal)" mat-mengangkat-tombol>Save</tombol>
submitForm(event: Event) { peristiwa.preventDefault(); ... }