通过父母的按钮提交孩子的表格答案

【问题标题】：Submit child's form via parent's button通过父母的按钮提交孩子的表格
【发布时间】：2020-09-15 16:02:35
【问题描述】：

（简化）架构

父组件：具有按钮和垫卡作为“内容视图”
子组件：包含表单并将显示在父组件的内容视图中

我有多个子组件可以显示在父组件的内容视图中（一次只能显示一个！）。为了减少冗余，我将保存按钮外包给了父组件。

我的想法是使用父级的按钮来保存子级的表单，通过将子级的保存功能绑定到按钮上。
像这样：

class ChildComponent{

    form = new FormGroup {...}

    constructor() {
        parentComponent.setupButton(this.saveChildForm.bind(this));
    }

    saveChildForm(): void {
      if (this.form.valid) {
        // send to backend
      }

}

当点击按钮并拥有有效的（子组件）表单时，数据将被发送到后端。

我的问题：

这种方法是否违反了任何“角度表单最佳实践”或“规则”，因为我使用的是没有提交按钮的表单？
有没有更好的处理方法？

提前致谢：D

【问题讨论】：

您应该将表单的状态保存在父组件中，例如在表单valueChanges 上，您可以向父组件发出包含所有表单数据的事件。然后你可以简单地按下按钮并将表单的保存状态发送到你的后端。

标签： angular typescript forms

【解决方案1】：

状态应该始终保持在最顶层的组件中。所有其他组件都应该是dumb，这意味着它们应该显示一些图形，接受输入并发出输出。

【讨论】：