หลีกเลี่ยง Angular2 เพื่อส่งแบบฟอร์มอย่างเป็นระบบเมื่อคลิกปุ่ม

โอเคอาจจะยังไม่ชัดเจน รับแบบฟอร์มนี้:

<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>

ทำไมปุ่มทั้งหมดจึงเรียกใช้submit()ฟังก์ชันนี้ และจะหลีกเลี่ยงสิ่งนั้นได้อย่างไร?

ฉันเห็นสองตัวเลือกในการแก้ปัญหา:

1) ระบุtype = "button"อย่างชัดเจน (ฉันคิดว่าน่าจะดีกว่า ):

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

ตามข้อกำหนด W3:

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

  องค์ประกอบปุ่ม ด้วย แอตทริบิวต์ประเภทไม่ ระบุหมายถึงสิ่งเดียวกันเป็นปุ่ม องค์ประกอบด้วยชุดประเภทแอตทริบิวต์ "ส่ง"

2) การใช้งาน$event.preventDefault():

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

หรือ

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

preview(e){
  e.preventDefault();
  console.log('preview')
}

Plunker นี้แนะนำเป็นอย่างอื่นทุกปุ่มดูเหมือนจะทำงานตามที่ตั้งใจไว้

อย่างไรก็ตามเพื่อป้องกันพฤติกรรมเริ่มต้นของแบบฟอร์มคุณสามารถทำได้

TS:

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

แม่แบบ:

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

ฉันพบว่าด้วยการเปิดตัว 2.0 (ngSubmit)กำลังส่งผ่านnullค่าเหตุการณ์ไปยังเมธอดดังนั้นคุณควรให้เราแทน(submit)

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

ไฟล์. ts ของคุณ

submit($event){
   /* form code */
   $event.preventDefault();
}

ตั้งค่าtype = "button"ในปุ่มที่คุณไม่ต้องการดำเนินการ submit

ฉันมีปัญหาเดียวกัน การทำงานรอบ ๆ ผมพบว่าถูกแทนที่buttonด้วยaและใช้รูปแบบปุ่มไปยังองค์ประกอบสมอ:

<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>

คุณต้องนำเข้า FormsModule จาก "@ angular / form" ใน app.module.ts ของคุณ

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