避免Angular2在按钮点击时系统地提交表单

Question

好的,也许这还不清楚.获取此表单:

<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()功能？以及如何避免这种情况？

Answer 1

我看到两个解决方案:

1)明确指定type ="button"(我认为更优选):

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

根据W3规范:

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

  A按钮元件与 无type属性 指定代表同样的东西作为一个按钮 设置为"提交"它的类型属性元素.

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

这个Plunker建议不然,每个按钮似乎按预期工作.

但是,为了防止表单的默认行为,您可以执行此操作,

TS:

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

模板:

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

Answer 3

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

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

Answer 4

我发现在2.0版本中将事件值(ngSubmit)传递null给方法,所以相反你应该我们(submit)

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

你的.ts文件

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

Answer 5

我有同样的问题。我周围的工作中发现被替换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>

Answer 6

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