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

Question

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

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

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

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

由于事件名称＆＃34;提交＆＃34;这是Angular中的默认事件名称，表单被提交两次，并且无论您定义的事件处理程序如何，都会调用（ngSubmit）。

要删除重复提交，请将事件名称更改为＆＃34; submit2＆＃34;例如，它只会提交一次：

应用-dumb.html：

<form [formGroup]="myForm" (ngSubmit)="submit2.emit(myForm)">
    name:
    <input type="text" formControlName="name">
    <button>
      submit
    </button>
</form>

应用-dumb.ts：

  @Output() submit2: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

演示：

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