CODEWITHSUNDEEP
angulareventemitterangular-reactive-forms
FussinHussin
FussinHussin

Reputation: 1814

Reactive form on dumb (presentation) component submits twice

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

Upvotes: 1

Views: 877

Answers (2)

rotemx
rotemx

Reputation: 954

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

Upvotes: 1

Alexander
Alexander

Reputation: 3245

I think the (submit) event is already defined in Angular which triggers it twice. https://reactive-form-emitter-ovyghl.stackblitz.io

Upvotes: 2

Related Questions