(ngSubmit) is called when press (click) button

Solution 1:

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

Make them plain buttons explicitly:

<button type="button"

Solution 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()"

Solution 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.

Solution 4:

In html

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

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

In Controller

@ViewChild('myForm') ngForm: NgForm;

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