Javascript Angular form submit事件在父组件和子组件之间触发两次

我有一个奇怪的问题，我的子表单的表单提交事件在我的父表单上触发了两次

child.component.html

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

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

提交子表单会在控制台输出中产生以下结果：

Child Form Submit
Parent Submit
Parent Submit

---

您在子组件上使用了一个保留字“submit”作为装饰函数和属性。因此，如果父组件中有表单，

（submit）

（相当于

（ngSubmit）

）与子组件中的事件同时激发。 将其更改为其他内容，如：

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

在子组件中：

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

---

@Output（）childSubmit=new EventEmitter
在submit（）中放入$event.preventDefault（），我以为我有，但我使用的解决方案阻止了按ENTER键提交表单。事实就是这样。现在修好了。谢谢。你知道你答案中的代码和stackblitz演示中的代码不同吗？您甚至可以注释
if（this.childForm.valid）{
因为
这个.childForm
是
未定义的
。我知道你回答了那个特定的问题，但我认为用这个来在父母和孩子之间交流不是一个好的做法。@SaifUllah，高兴能帮上忙：）这太令人沮丧了，我只把我的输出属性命名为
提交
，因为Angular的lint不重要请注意“输出属性的前缀不应该是on。”谢谢！！！我完全不知道是什么触发了第二个调用
<child-form (childSubmit)="parentSubmit($event)"></child-form>

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