避免Angular2button点击系统地提交表单

好的，也许这不清楚。 获取此表单：

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

为什么所有button都会触发submit()函数？ 而如何避免呢？

Answer 1

我看到两个select来解决它：

1）明确指定type =“button” （我认为这是更可取的 ）：

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

根据W3规范

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

  没有 指定 type属性 的button 元素表示与type属性设置为“submit” 的button 元素 相同的东西 。

2）使用$event.preventDefault()

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

要么

 <button (click)="preview($event);">Preview</button> preview(e){ e.preventDefault(); console.log('preview') } 

Answer 2

这个Plunkerbuild议否则，每个button似乎按预期工作。

但是，要防止表单的默认行为，可以这样做，

---

TS：

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

模板：

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

Answer 3

我发现2.0版本(ngSubmit)传递一个null事件值的方法，所以相反，你应该(submit)

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

你的.ts文件

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

Answer 4

我有同样的问题。 我find的工作是replacebutton与a和应用button样式锚元素：

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

Answer 5

在不想执行提交的button中设置type =“button” 。

Answer 6

您必须从app.module.ts中的'@ angular / forms'导入FormsModule

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