(ngSubmit) is called when press (click) button

Question

I have two buttons on my Angular2 Form Component. The button are doing their own functionalities.

1. Button Submit : Which is submit all the values to the API.
2. Button Add. : Which is push an object to an array.

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

<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

Answer 1

Buttons inside a form become a type="submit" by default.

Make them plain buttons explicitly:

<button type="button"

Answer 2

As per W3 spec the default value for attribute type inside button is submit.

ie <button> == <button type="submit">

If you dont want the ngSubmit event to get triggered set the attribute type to button.

<button type="button">

Or use $event.preventDefault().

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

Answer 3

inside form when (ngSubmit) is placed it always waits for 2 things.

1. Is the Form is valid? it checks whether all the required input is filled.
2. waits for any event to trigger the (ngsubmit) like button click(in which type is not mentioned or type is mentioned as submit) or enter in any input field.

Answer 4

In html

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

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

In Controller

@ViewChild('myForm') ngForm: NgForm;

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