按(单击)按钮时调用(ngSubmit)

Question

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

1. 按钮提交:哪个提交API的所有值.
2. 按钮添加.:将对象推送到数组.

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

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调用.但我没有打电话onSubmit()给(click)按钮事件

Answer 1

type="submit"默认情况下,表单中的按钮.

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

<button type="button"

Answer 2

根据 W3 规范，按钮内属性类型的默认值为“提交”。

IE<button> == <button type="submit">

如果您不希望触发 ngSubmit 事件，请将属性类型设置为按钮。

<button type="button">

或者使用 $event.preventDefault()。

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