愚蠢（演示）组件反应形式提交两次

Question

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

我试图让我所有的逻辑在智能组件中。另外，对这种模式的最佳实践的任何批评都是值得赞赏的。

这里是我的stackblitz它，请为它和它张贴如果您有任何意见：

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

Answer 1

表单由于事件名称“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

Answer 2

我认为（提交）事件的角度已经定义触发两次。 https://reactive-form-emitter-ovyghl.stackblitz.io