title: Angular form submit event firing twice between parent and child components
body: <p>I have a strange problem where by the form submit event of my child form is firing twice on my parent form.</p>
  
  <p><strong>child.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="childForm" (ngSubmit)="childFormSubmit()"&gt;
    ...
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>child.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child-form',
    templateUrl: 'login.component.html',
  })
  
  export class ChildComponent {
    @Output() submit = new EventEmitter&lt;any&gt;();
  
    public childForm: FormGroup;
  
    childFormSubmit() {
      if (this.childForm.valid) {
        console.log('Child Form Submit')
        this.submit.emit(this.childForm.value);
      }
    }
  }
  </code></pre>
  
  <p><strong>parent.component.html</strong></p>
  
  <pre><code>&lt;child-form (submit)="parentSubmit($event)"&gt;&lt;/child-form&gt;
  </code></pre>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'parent',
    templateUrl: 'parent.component.html',
  })
  
  export class ParentComponent {
  
    constructor() {
    }
  
    parentSubmit(event: any) {
      console.log('Parent Submit');
    }
  }
  </code></pre>
  
  <p>Submitting the child form results in the following in the console output:</p>
  
  <pre><code>Child Form Submit
  Parent Submit
  Parent Submit
  </code></pre>