Why use ngSubmit at all instead of a simple button and a function

Question

So for a while now I've been asking myself if I should use ngSubmit or just bind a (click)="submit()" on a button.

There are a lot of questions about submit and ngSubmit but do we really need to use the old html submit mechanic ? Especially since in some cases it's not even a POST but a PATCH that is executed for form updating. Also, forms tend to be less straightforward nowadays as I'm having forms inside of forms or components with subforms inside of my main form (by passing in my FormGroup to my child components).

So if I use ngSubmit, should I only place it on my parent form ? On all of my forms ? I'm quite confused as to what the added value of ngSubmit is over a simple button with a click event handle and a submit function with a http.post() especially when using reactive forms and having access to pretty much all the form controls and validators inside my FormGroup object.

Answer 1

Having it on the parent form should be enough if you want to submit all your forms altogether. One of the perks of ngSubmit is that it keeps the UX of submit. Submission will be triggered by clicking on a button with the submit type (no need for (click) event), or by hitting Enter on an input of your form.

Answer 2

There's no difference between using ngsubmit with a submit button over using a button calling a method referencing the instance of the form model. It's better practice and more commonly used for the 1st approach though. Other developers you could be working with would tend to search for the ngsubmit method when working with your code.