Submit in custom Angular button component does not submit form

I have extracted the submit button into a seperate component. Now, the form is not submitted/the submit function is not called anymore as ngSubmit is not triggered.

<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
...
<app-submit-button></app-submit-button>
</form>


The problem is that the button in my custom component app-submit-button triggers a function call on click. The submit event is not further propagated to the parent component and thus its submit function is not executed. However, when I remove (click)='submit()' from the child component, form submit works.

<ng-container [ngSwitch]='state'>
<button *ngSwitchCase='buttonState.Idle' (click)='submit()'
type='submit'>{{idleText}}</button>
...
</ng-container>


I tried it with and without type='submit' on app-submit-button and on the button itself.

I got it working with

<app-submit-button (click)='submit(form.value)'></app-submit-button>


and removing ngSubmit. I would like to know if it is the proper way or if this behaves differently then using ngSubmit.

Continue reading...