typescript 当按下（单击）按钮时调用 (ngSubmit)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40968069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
(ngSubmit) is called when press (click) button
提问by nifCody
I have two buttons on my Angular2 Form Component. The button are doing their own functionalities.
我的 Angular2 表单组件上有两个按钮。按钮正在执行自己的功能。
- Button Submit : Which is submit all the values to the API.
- Button Add. : Which is push an object to an array.
- 按钮提交：将所有值提交给 API。
- 按钮添加。：这是将对象推送到数组。
The two methods are here...
两种方法都在这里...
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);
}
My Component.html structure is as below
我的 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>
when I press the (click)button the form is submitted to the API call. But I did not call the onSubmit()on the (click)button event
当我按下(click)按钮时，表单被提交给 API 调用。但我没有叫onSubmit()上(click)按钮事件
回答by Günter Z?chbauer
Buttons inside a form become a type="submit"by default.
表单内的按钮type="submit"默认变为 a 。
Make them plain buttons explicitly:
明确地使它们成为普通按钮：
<button type="button"
回答by Raj Kumar
inside form when (ngSubmit) is placed it always waits for 2 things.
当 ( ngSubmit) 被放置在表单内部时，它总是等待两件事。
- Is the Form is valid? it checks whether all the requiredinput is filled.
- waits for any eventto trigger the (ngsubmit) like button click(in which type is not mentioned or type is mentioned as submit) or enter in any input field.
- 表格有效吗？它检查是否填写了所有必需的输入。
- 等待任何事件触发（ngsubmit），如按钮单击（其中未提及类型或将类型提及为提交）或在任何输入字段中输入。
回答by arun kumar
As per W3 spec the default value for attribute typeinside button is submit.
根据 W3 规范，按钮内属性类型的默认值是提交。
ie <button> == <button type="submit">
IE <button> == <button type="submit">
If you dont want the ngSubmit event to get triggered set the attribute typeto button.
如果您不想触发 ngSubmit 事件，请将属性类型设置为按钮。
<button type="button">
<button type="button">
Or use $event.preventDefault().
或者使用 $event.preventDefault()。
<button (click)="addJobService(modelJobService); $event.preventDefault()"
<button (click)="addJobService(modelJobService); $event.preventDefault()"
