Tránh Angular2 để gửi biểu mẫu một cách có hệ thống khi nhấp vào nút

Ok vì vậy có thể điều này là không rõ ràng. Nhận biểu mẫu này:

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

Tại sao tất cả các nút đều kích hoạt submit()chức năng? Và làm thế nào để tránh điều đó?

Tôi thấy hai tùy chọn để giải quyết nó:

1) Chỉ định rõ ràng type = "button" (tôi nghĩ nó thích hợp hơn ):

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

Theo đặc điểm kỹ thuật W3:

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

  Một yếu tố nút với không có loại thuộc tính quy định hiện điều tương tự như một nút phần tử với bộ loại thuộc tính của nó để "submit" .

2) Sử dụng $event.preventDefault():

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

hoặc là

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

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

Plunker này gợi ý ngược lại, mọi nút dường như hoạt động như dự định.

Tuy nhiên, để ngăn hành vi mặc định của biểu mẫu, bạn có thể làm điều này,

TS:

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

Bản mẫu:

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

Tôi thấy rằng với bản phát hành 2.0 (ngSubmit)đang chuyển một nullgiá trị sự kiện cho phương thức, vì vậy thay vào đó bạn nên chúng tôi(submit)

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

tệp .ts của bạn

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

Đặt type = "button" trong nút mà bạn không muốn thực hiện gửi.

Tôi có cùng một vấn đề. Công việc xung quanh tôi đã tìm thấy là thay thế buttonbằng avà áp dụng kiểu nút cho phần tử neo:

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

Bạn phải nhập FormsModule từ '@ angle / form' trong app.module.ts của mình

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