好吧，也许这还不清楚。得到这个表格：
<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规范：
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')
}
这个 Plunker建议否则，每个按钮似乎都按预期工作。
但是，为了防止表单的默认行为，您可以这样做，
TS：
submit(e){
e.preventDefault();
}
模板：
<form (submit)="submit($event)" #crisisForm="ngForm">
您必须从 app.module.ts 中的“@angular/forms”导入 FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
})
我发现 2.0 版本(ngSubmit)正在将null事件值传递给该方法，因此您应该我们(submit)
<form (submit)="submit($event)" #crisisForm="ngForm">
你的 .ts 文件
submit($event){
/* form code */
$event.preventDefault();
}
在不想执行提交的按钮中设置type="button"。