愚蠢（演示）組件反應形式提交兩次

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