按下（单击）按钮时调用（ngSubmit）答案

【问题标题】：(ngSubmit) is called when press (click) button按下（单击）按钮时调用（ngSubmit）
【发布时间】：2016-12-05 06:08:01
【问题描述】：

我的 Angular2 表单组件上有两个按钮。该按钮正在执行自己的功能。

按钮提交：将所有值提交到 API。
按钮添加。 : 将对象推送到数组中。

这两种方法都在这里...

onSubmit() {
this.submitted = true;
this.model.service_requests = this.modelJobServices;
this.onCreateJob();
}

addJobService(modelJobService :Jobservice){
let modelJobServiceLocal = new Jobservice(modelJobService.service_id,modelJobService.service_note,modelJobService.status)
this.modelJobServices.push(modelJobServiceLocal);
}

我的 Component.html 结构如下

<form #jobRegistrationForm="ngForm" (ngSubmit)="onSubmit()">
......
......
......
<button class="flat btn-primary form-control" id="btn_add" (click)="addJobService(modelJobService)"> ADD SERVICE </button>
....
....
....
<button (submit)="onSubmit()" [disabled]="!jobRegistrationForm.form.valid" class="flat form-control col-md-4 btn-primary">{{BUTTON_TEXT}}</button>

当我按下(click) 按钮时，表单将提交给 API 调用。但是我没有在(click)按钮事件上调用onSubmit()

【问题讨论】：

相关（可能重复？）问题：stackoverflow.com/questions/9824808/…

标签： angular typescript

【解决方案1】：

表单内的按钮默认变为type="submit"。

明确地将它们设为普通按钮：

<button type="button"

【讨论】：

这太疯狂了！！ :-p 非常感谢！我不会猜到的。你知道为什么 Angular 会这样做吗？对我来说，如果只为 type="submit" 按钮调用 ngSubmit 会更干净。
如此简单，却又如此难找！谢谢！
@Zaphoid 这不是 Angular 做出的选择：除非另有说明，否则按钮的类型始终默认为“提交”，即使在原生 javascript 中也是如此。另见this stackoverflow thread。我想 Angular 覆盖这种行为会很困难和令人困惑。

【解决方案2】：

根据 W3 规范，按钮内属性 type 的默认值是提交。

即<button> == <button type="submit">

如果您不希望触发 ngSubmit 事件，请将属性 type 设置为 button。

<button type="button">

或者使用 $event.preventDefault()。

<button (click)="addJobService(modelJobService); $event.preventDefault()"

【讨论】：

【解决方案3】：

当 (ngSubmit) 放置在表单内部时，它总是等待两件事。

表格是否有效？它检查是否所有必需输入填充。
等待任何事件触发 (ngsubmit) 喜欢按钮单击（其中未提及类型或提及类型为提交）或在任何输入字段中输入。

【讨论】：

【解决方案4】：

在html中

<form  #myForm="ngForm">
</form>

<button (click)="send()"></button>

在控制器中

@ViewChild('myForm') ngForm: NgForm;

send() { this.ngForm.ngSubmit.emit(); }

【讨论】：