如何从子组件获取表单并发送给父组件

Question

我有一个带有两个孩子的父组件。 我想从孩子那里获取表格并在每次更改时发送给父母。

我有这样的父表单：

 profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({}),
  });

孩子 1 组件：

 @Output() onFormEmit = new EventEmitter<any>();
  form = new FormGroup({
    child1Key1: new FormControl(''),
    child1Key2: new FormControl(''),
    child1Key3: new FormControl(''),
  });

  ngOnInit() {
    this.onFormEmit.emit(this.form);
  }

孩子 2 组件：

 @Output() onFormEmit = new EventEmitter<any>();
  form = new FormGroup({
    child2Key4: new FormControl(''),
    child2Key5: new FormControl(''),
  });

  ngOnInit() {
    this.onFormEmit.emit(this.form);
  }

发出后，我希望表单是这样的：

  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      child1Key1: new FormControl(''),
      child1Key2: new FormControl(''),
      child1Key3: new FormControl(''),
      child2Key4: new FormControl(''),
      child2Key5: new FormControl(''),
    }),
  });

而且我还想将嵌套表单作为输入发送给孩子，因此我需要保持表单之间的活跃对话。

这是我到目前为止所拥有的： StackBlitz

Answer 1

在我看来，“嵌套表单”可能就是您正在寻找的，其中父formGroup作为input传递给子组件 - 子组件中的控件被添加到

链接文章中描述了三种方法，第一种是执行上述操作：

• https://www.dotnetsurfers.com/blog/2020/10/11/3-approaches-for-implementing-nested-forms-in-angular/

Answer 2

那么，为什么不在每次更改后发出孩子的form.getRawValue()并且当您在父母的事件侦听器上获取此数据时迭代对象键和值设置结果表单字段？ 在回调结束时，再次将更新后的表单发送给孩子。