Angular.js: ngSubmit mengaktifkan pengiriman formulir pada tombol apa pun tanpa type="button"
Saya baru saja mengalami masalah di mana angular mengirimkan formulir saya dua kali.
<div class="text-center">
<input type="submit" class="btn btn-primary" value="Create" />
<button class="btn btn-primary" ng-click="close()">Close</button>
</div>
Kedua tombol di sini mengirimkan formulir yang menghasilkan pengiriman ganda. Saya menyadari masalahnya berkaitan dengan pengiriman formulir sudut pada tombol apa pun yang bukan type="button". Menambahkan atribut itu ke tombol tutup akan memperbaikinya. Saya tidak tahu apakah ini dimaksudkan tetapi itu membingungkan saya sampai saya mengetahuinya sehingga memutuskan untuk memperhatikannya.
parliament718
Semua 13 komentar
Saya pikir ini dijelaskan dalam dokumen, meskipun tidak disebutkan bahwa Anda dapat mencegah pengiriman dengan puttint type="button":
jika formulir memiliki satu atau lebih bidang input dan satu atau lebih tombol atau input[type=submit] kemudian menekan enter di salah satu bidang input akan memicu handler klik pada tombol pertama atau input type=submit dan handler kirim pada formulir terlampir (ngSubmit)
Narretz
pada 28 Jan 2014
Saya hanya membuang waktu berjam-jam untuk ini ...
ng-submit seharusnya hanya diaktifkan untuk tombol dengan type="submit" yang disetel secara eksplisit.
soichih
pada 31 Jul 2014
itu .... bukan cara kerja html?
caitp
pada 31 Jul 2014
Oh, jadi ini cara formulir HTML menangani tombol apa pun sebagai tombol kirim secara default.. tidak ada hubungannya dengan Angular (dan Angular menggunakan acara pengiriman formulir untuk mengaktifkan ng-kirim - yang masuk akal). Saya bertanya-tanya mengapa type="kirim" harus ada?
Anyway.. Saya akan memastikan untuk menambahkan type="button" pada semua tombol kecuali tombol submit.
soichih
pada 31 Jul 2014
@soichih - ya, Anda benar. ngSubmit hanya bereaksi terhadap acara kirim dan browser bertanggung jawab untuk memicu itu.
Sebenarnya ada beberapa skenario ketika ini mungkin terjadi.
Untuk mencegah eksekusi ganda dari handler, gunakan hanya salah satu direktif ngSubmit atau ngClick. Ini karena aturan pengiriman formulir berikut dalam spesifikasi HTML:
- Jika formulir hanya memiliki satu bidang input, tekan enter di bidang ini memicu pengiriman formulir (ngSubmit)
- jika formulir memiliki 2+ bidang input dan tidak ada tombol atau input[type=submit] maka menekan enter tidak memicu pengiriman
- jika formulir memiliki satu atau lebih bidang input dan satu atau lebih tombol atau input[type=submit] kemudian menekan enter di salah satu bidang input akan memicu handler klik pada tombol pertama atau input type=submit dan handler kirim pada formulir terlampir (ngSubmit)
Itu didokumentasikan di sini: https://docs.angularjs.org/api/ng/directive/form
Kita harus menggandakannya atau secara lebih eksplisit merujuknya di dokumen ngSubmit.
petebacondarwin
pada 31 Jul 2014
@petebacondarwin ingin membuat tambalan cepat untuk itu?
caitp
pada 31 Jul 2014
Oh, teruskan :-)
petebacondarwin
pada 31 Jul 2014
Terima kasih banyak telah menunjukkan ini! Saya mungkin tidak pernah menemukan ini dengan posting ini! Bersulang! -- Steve
svanetten1976
pada 20 Jan 2015
FYI, ini juga terjadi di Ionic3.... menambahkan type="button" ke tombol ke-2 juga memperbaiki masalah
rodneyjoyce
pada 26 Apr 2017
terima kasih soichih
arabindawhiz
pada 30 Agu 2017
Anda harus berhati-hati karena jika Anda memiliki lebih dari satu tombol meskipun Anda telah menentukan bahwa salah satunya adalah kirim, itu dikirimkan di salah satu tombol yang tidak memiliki type = "button".
fabidefabula
pada 13 Feb 2018
Bagaimana jika menambahkan type="button" bukanlah solusi karena komponen tombol khusus digunakan pada formulir?
moniuch
pada 15 Mar 2018
@moniuch , seperti yang dijelaskan dalam dokumen, ini dilakukan oleh browser, bukan AngularJS. Ini adalah perilaku HTML standar.
gkalpak
pada 15 Mar 2018
Masalah terkait
tdumitrescu
·
3Komentar
landed1
·
3Komentar
awerlang
·
3Komentar
ashish91
·
3Komentar
cmplank
·
3Komentar
Komentar yang paling membantu
Saya hanya membuang waktu berjam-jam untuk ini ...
ng-submit seharusnya hanya diaktifkan untuk tombol dengan type="submit" yang disetel secara eksplisit.