Ggtcf

I'm wonder what is the different between form submit event and button click event to do the http post action.

Form submit example:

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
 <input name="first" ngModel required #first="ngModel">
 <input name="last" ngModel>
 <button>Submit</button>
</form>

Button click example:

<form #f="ngForm">
 <input name="first" ngModel required #first="ngModel">
 <input name="last" ngModel>
</form>

<div>
 <button (click)="onSubmit(f)">Submit</button>
</div>

In background, the handling is just the same.

 @ViewChild(NgForm) f: NgForm;

 onSubmit() 
 console.log(this.f); 
 

Anyone know what is the difference?

Thanks a lot.

The difference is they are two different events registered to different elements in the DOM.

The submit event fires on the <form> element itself, and not on any <button>
.The submit event only fires when the user clicks a submit button

By default your submit button has a type of type="submit"

On the other hand the click event is fired when the user clicks on an element, in this case your button.

One of the differences that i know so far, is that if you are inside a ngForm and if you have a (ngSubmit) event, the function that is linked to this event will be executed if you press ENTER key.
This is helpfull to go through forms quickly, without touching the mouse.

There are more info on the subject at this address
https://angular.io/guide/reactive-forms

There is no flagrant difference between the two. The answer made by @HMarteau is inaccurate however, as you can use the 'Enter' button to submit an Angular form whether using the ngSubmit or the click event.

The main difference is that Angular's ngSubmit allows you to use some powerful built in properties such as required, max-length, etc., used for validation, which you might not be able to use in the case of click.