Angular form submit event firing twice between parent and child components

Question

I have a strange problem where by the form submit event of my child form is firing twice on my parent form.

child.component.html

<form [formGroup]="childForm" (ngSubmit)="childFormSubmit()">
  ...
</form>

child.component.ts

@Component({
  selector: 'child-form',
  templateUrl: 'login.component.html',
})

export class ChildComponent {
  @Output() submit = new EventEmitter<any>();

  public childForm: FormGroup;

  childFormSubmit() {
    if (this.childForm.valid) {
      console.log('Child Form Submit')
      this.submit.emit(this.childForm.value);
    }
  }
}

parent.component.html

<child-form (submit)="parentSubmit($event)"></child-form>

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
})

export class ParentComponent {

  constructor() {
  }

  parentSubmit(event: any) {
    console.log('Parent Submit');
  }
}

Submitting the child form results in the following in the console output:

Child Form Submit
Parent Submit
Parent Submit

I thought I had, but the solution I used prevented the pressing of ENTER to submit the form. — Remotec, Aug 15 '17 at 11:11

Vega · Accepted Answer · 2018-02-18T10:58:07.743

48

You have used a reserved word 'submit' on child component as decorator function and attribute. So if you have a form in a parent component, (submit) (which is equivalent of (ngSubmit)) is fired at the same time as the event from the child. Change it for something else, like this:

<child-form (childSubmit)="parentSubmit($event)"></child-form>

and in child component:

 @Output() childSubmit = new EventEmitter<any>();
 ...
 childFormSubmit() {
   if (this.childForm.valid) {
         console.log('Child Form Submit')
         this.childSubmit.emit();
   }
 }

Here is a working DEMO

edited Feb 18 '18 at 10:58

answered Aug 15 '17 at 11:38

Vega

27,856
27
95
103

4

This is what it was. Fixed now. Thanks. – Remotec Aug 15 '17 at 12:41
You do realise that the code in your answer and the code in the stackblitz demo is different ? You even comment the `if (this.childForm.valid) {` because `this.childForm` is **`undefined`**. I know that you answer that specific question, but I don't think this is a good practice to use this to communicate between parent and child. – Neyt Jun 18 '18 at 11:59
@Neyt, I think you didn't read the question throughly. The OP doesn't ask how to make parent-child communication, but why the code doesn't work as expected. My answer is responding to that question. I commented that line in my demo, because I don't have a OP's MCVE and needed to showcase the important part that submit was firing once if correctly used. As for Parent-child communication, there is no one right way doing it, but many. One of them is the same as the OP:https://angular.io/guide/component-interaction#parent-listens-for-child-event – Vega Jun 18 '18 at 12:36
@Vega, english is not my native language so what I (thought I) was saying is exactly what you are saying here ^^. But : I will just say that it can disturb to go to your stackblitz demo, see the difference between the code, try to uncomment it, and have an error (while of course, like you said, you just take the code of the question which probably work for him !) – Neyt Jun 18 '18 at 12:48
1

@Vega I would have never caught this one on my own, thanks for the answer. – Saif Feb 01 '19 at 07:04
1

@SaifUllah, glad could help :) – Vega Feb 01 '19 at 07:07
Yes, change is a reserved word, too :) – Vega Feb 08 '19 at 07:34
just adding my 2 cents: also the case with the tap event on a nativescript apps, and all other touch events this used to be not like that in the past, components did not have default events by default, I had to recreate the basic events like click and tap on my own... – Vincent Duprez Apr 10 '19 at 19:56
2

This is so frustrating, I only named my output property as `submit` because Angular's lint impose that "the output property should not be prefixed with on." – m.rufca Aug 23 '19 at 19:39
1

Thanks!!! i had absolutely no clue what was triggering the second call – Mawcel Oct 23 '19 at 13:37
1

this also solved my problem of wanting to submit parent form when submiting the child. perfect, thanks – rmpt Oct 31 '21 at 18:03

Angular form submit event firing twice between parent and child components

1 Answers1