Reactive form on dumb (presentation) component submits twice

Question

I have a smart and dumb component, and my form is being submitted twice off the event emitter. I have been on this for a few days and can't figure it out.

I'm trying to keep all my logic in the smart component. Also, any criticism on best practices for this pattern is appreciated.

here is my stackblitz for it, please for it and post it if you have any ideas:

https://stackblitz.com/edit/reactive-form-emitter?file=app%2Fapp.component.ts

Answer 1

The form is submitted twice because of the event name "submit", which is a default event name in Angular, and is being called on (ngSubmit) regardless of the event handler you defined.

To remove the duplicate submission, change the name of the event to "submit2" for example, and it will only submit once:

app-dumb.html:

<form [formGroup]="myForm" (ngSubmit)="submit2.emit(myForm)">
    name:
    <input type="text" formControlName="name">
    <button>
      submit
    </button>
</form>

app-dumb.ts:

  @Output() submit2: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

demo :

https://stackblitz.com/edit/reactive-form-emitter-wf2lhd