哑（演示）组件上的活动表单提交两次

Question

我有一个智能和愚蠢的组件，我的表单被提交两次事件发射器。 我已经在这几天了，无法弄明白。

我正在努力将所有逻辑保留在智能组件中。 此外，对这种模式的最佳实践的任何批评都表示赞赏。

这是我的stackblitz，请它，如果你有任何想法，请发布它：

https://stackblitz.com/edit/reactive-form-emitter?file=app%2Fapp.component.ts

Answer 1

我认为（submit）事件已经在Angular中定义，它会触发两次。 https://reactive-form-emitter-ovyghl.stackblitz.io

Answer 2

表单因为事件名称“submit”而提交两次，这是Angular中的默认事件名称，并且无论您定义的事件处理程序如何，都会调用（ngSubmit）。

要删除重复提交，请将事件名称更改为“submit2”，并且只提交一次：

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>();

演示：

https://stackblitz.com/edit/reactive-form-emitter-wf2lhd