Angular 9 从子组件提交表单答案

【问题标题】：Angular 9 submit form from child componentAngular 9 从子组件提交表单
【发布时间】：2020-07-04 17:12:49
【问题描述】：

我陷入了一个我什至不知道是否可以解决的问题。我的要求是我有一个可以有很多自定义的表单，但是每次自定义的提交都是一样的为了避免重复代码，我正在考虑创建一个子组件，在其中注入 html 元素。我创建了一个堆栈闪电战

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

【问题讨论】：

什么不正常，你能在这里解释一下吗？
我会尝试...我有很多带有表单的父级，但只有一个提交逻辑。我想使用 templateOutlet 将 html 元素传递给子元素并在子元素中执行提交的逻辑，以便在代码中只有一个点执行提交操作
stackblitz.com/edit/… 这能解决你的问题吗
您可以将您的提交逻辑放在一个服务中，并在您的每个父组件中提供该服务。所以代码仍然在一个地方，可以很容易地重用
是的，这是可能的。但是如果我把逻辑放在服务上，表单的模板就没用了？？？？

【解决方案1】：

工作演示，在此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')
}

这样你就可以解决子组件内部的提交逻辑实现了。

【讨论】：

【解决方案2】：

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

【讨论】：

问题是我不知道如何触发提交事件。 (ngsubmit) 方法在父节点上，目标是在子节点上执行提交。这样我就会有孩子的提交代码。如果我发出事件，我将在父级上为每个自定义设置逻辑。