哑（演示）组件上的反应式提交两次

Question

我有一个聪明而愚蠢的组件，我的表单被事件发射器提交了两次。我已经研究了几天了，想不通。

我试图将我的所有逻辑都保留在智能组件中。此外，欢迎对这种模式的最佳实践提出任何批评。

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

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