Angular 9 从子组件提交表单

Question

我被困在一个我什至不知道是否可以解决的问题中。我的要求是我有一个可以有很多自定义项的表单，但是每个自定义项的提交都是相同的为了避免代码重复，我想创建一个子组件，在其中注入 html 元素。我创建了一个 stackblitz

我的问题是我无法在子组件中提交表单。那么，是否可以将表单传递给子组件，然后在子组件内部提交表单？

Answer 1

所以，如果你想从子组件提交表单，你必须在带有@output装饰器的子组件中有一些属性来发出一些需要提交的父表单知道的事件。@output decorator description

Answer 2

工作演示，在此StackBlitz Link

首先，因为您已经将 parentForm 传递给 child-component，那么您只需要将 Submit 逻辑放入子组件中，如下所示..

<form [formGroup]="parentForm" (ngSubmit)="submit()">
    {{parentForm.value | json}}
    <input type="submit" value="Submit"> 
</form>

并且在 child-component.ts 文件中你需要 submit() 函数。

submit(){
   console.log('submit')
}

这样你就可以在子组件中解决你的提交逻辑实现。

Angular 9 submit form from child component