Angular动态表单问题：子组件无法更新顶层表单

嘿，我之前也踩过这个Angular动态表单的坑！明明子组件创建了FormGroup，可父表单就是没动静，后来才发现是没把子组正确注册到父表单里。给你说说我是怎么解决的：

子组件拿到父表单的引用后，不能只创建自己的FormGroup就完事——必须调用父表单的addControl()方法，把自己的子组注册到父表单的模型结构里，这样父表单才会包含这个子组，数据才能同步更新。

1. 父组件：初始化空FormGroup并传递给子组件 #

首先父组件先创建顶层的空FormGroup，然后在模板里把它传递给子组件：

父组件类 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-parent-form',
  templateUrl: './parent-form.component.html'
})
export class ParentFormComponent implements OnInit {
  parentForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 初始化空的顶层FormGroup
    this.parentForm = this.fb.group({});
  }
}

父组件模板 #

<form [formGroup]="parentForm">
  <!-- 传递父表单给子组件，还可以自定义子组名称 -->
  <app-child-form [parentForm]="parentForm" [groupName]="'formGroup1'"></app-child-form>
  <app-child-form [parentForm]="parentForm" [groupName]="'formGroup2'"></app-child-form>

  <!-- 用来验证的提交按钮和表单值预览 -->
  <button type="submit">提交表单</button>
  <pre class="form-preview">{{ parentForm.value | json }}</pre>
</form>

2. 子组件：创建子FormGroup并注册到父表单 #

子组件通过@Input接收父表单，创建自己的子组后，一定要调用parentForm.addControl()把它加进去：

子组件类 #

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-child-form',
  templateUrl: './child-form.component.html'
})
export class ChildFormComponent implements OnInit {
  @Input() parentForm: FormGroup;
  @Input() groupName: string = 'defaultGroup'; // 默认组名，可由父组件传入
  childForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 创建子表单组，包含需要的控件
    this.childForm = this.fb.group({
      formControl1: [''],
      formControl2: ['']
    });

    // 关键操作：将子表单组注册到父表单中
    if (this.parentForm && !this.parentForm.contains(this.groupName)) {
      this.parentForm.addControl(this.groupName, this.childForm);
    }
  }
}

子组件模板 #

<div [formGroup]="childForm" class="child-form">
  <label>
    控件1：
    <input type="text" formControlName="formControl1">
  </label>
  <label>
    控件2：
    <input type="text" formControlName="formControl2">
  </label>
</div>

• 时机问题：确保子组件初始化时（ngOnInit）父表单已经创建完成，不然parentForm会是undefined，所以加了if (this.parentForm)的判断。
• 重复注册：如果同一个子组件可能被多次加载，要先判断父表单里是否已经存在同名的组（!this.parentForm.contains(this.groupName)），避免报错。
• 双向绑定：子组件的表单控件不用额外做双向绑定，只要子组注册到父表单，父表单的value会自动包含子组的所有控件值。

这样做完之后，你要的表单结构FormGroup -- FormGroup1 -- FormControl1/FormControl2 -- FormGroup2 -- ...就完全生效了，父表单能实时获取子组件的表单数据~

内容的提问来源于stack exchange，提问作者C02Equinox