Hindari Angular2 untuk mengirimkan formulir secara sistematis saat mengklik tombol

107

Ok jadi mungkin ini tidak jelas. Dapatkan formulir ini:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

Mengapa semua tombol memicu submit()fungsi tersebut? Dan bagaimana cara menghindarinya?

javascript forms angular submit kfa
sumber
1
return false; dari fungsi submit () Anda
Aran Dekar

Jawaban:

213

Saya melihat dua opsi untuk menyelesaikannya:

1) Tentukan type = "button" secara eksplisit (menurut saya ini lebih disukai ):

<button type="button" (click)="preview();">Preview</button>

Menurut spesifikasi W3:

2) Gunakan $event.preventDefault():

<button (click)="preview(); $event.preventDefault()">Preview</button>

atau 

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}
yurzui
sumber
3
(click)="preview(); false"harus melakukan hal yang sama. Misalnya stopPropagation()perlu dipanggil secara eksplisit, tetapi jika penangan peristiwa kembali false, maka preventDefaultakan dipanggil pada acara tersebut.
Günter Zöchbauer
1
@ Günter Zöchbauer Terima kasih banyak telah menunjukkan hal ini! Pertama saya mencobanya tapi saya menulis return falsedan tidak berhasil :)
yurzui
1
returnmungkin tidak diperbolehkan dalam ekspresi yang mengikat tetapi nilai ekspresi terakhir dikembalikan secara implisit.
Günter Zöchbauer
2
Menggunakan # 2 sepertinya merupakan jawaban terbaik. Hanya menambahkan: type = "button" ke tombol saya memecahkan masalah
Michael Washington
1
Saya tidak tahu tentang type=buttonspesifikasi W3C. Terima kasih!!
Hugo H
17

Plunker ini menyarankan sebaliknya, setiap tombol tampaknya berfungsi sebagaimana mestinya.

Namun, untuk mencegah perilaku default formulir Anda bisa melakukan ini,

TS:

submit(e){
 e.preventDefault();
}

Template:

<form (submit)="submit($event)" #crisisForm="ngForm">
Ankit Singh
sumber
Terima kasih atas jawabannya dan plnkr ... Ini semua tentang jenis tombol plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy
kfa
memang ! ini. dan Anda telah menentukan pada semua tombol, sehingga berfungsi sebagaimana mestinya
Ankit Singh
7

Saya menemukan bahwa dengan rilis 2.0 (ngSubmit)melewati nullnilai acara ke metode, jadi Anda harus kami(submit) 

<form (submit)="submit($event)" #crisisForm="ngForm">

file .ts Anda 

submit($event){
   /* form code */
   $event.preventDefault();
}
imal hasaranga perera
sumber
Terima kasih! Ini berhasil, jangan tahu mengapa ngSubmit berfungsi ketika tidak digunakan sebagai grup formulir, tetapi ketika saya menggunakannya sebagai grup formulir, saya harus menggunakan solusi Anda
Nikhil Das Nomula
Saya memberikan jawaban ini beberapa waktu yang lalu ketika 2.0 baru saja dirilis, tetapi setelah itu sudut 2 telah berkembang pesat jadi apakah Anda yakin Anda menggunakan versi rilis terbaru?
imal hasaranga perera
6

Tetapkan type = "button" di tombol yang tidak ingin Anda jalankan.

Alexis Gamarra
sumber
6

Saya memiliki masalah yang sama. Pekerjaan yang saya temukan adalah mengganti buttondengan adan menerapkan gaya tombol ke elemen jangkar:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>
Arun Ghosh
sumber
6

Anda harus mengimpor FormsModule dari '@ angular / forms' di app.module.ts Anda

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
Marouane Afroukh
sumber