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?

— kfa
sumber

1

return false; dari fungsi submit () Anda

— Aran Dekar

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:

http://w3c.github.io/html-reference/button.html

Unsur tombol dengan tidak ada atribut jenis tertentu merupakan hal yang sama sebagai tombol elemen dengan set atribut type ke "submit" .

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