Angular form submit event firing twice between parent and child components
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