Angular如何通过FormArray实现子组件响应式表单与父表单同步更新

核心问题定位 #

现有代码存在两处完全的逻辑断层，导致表单数据无任何联动可能：

• 父组件Questions对应的FormArray始终为空，addQuestion方法无实际推入表单实例的逻辑
• 子组件独立创建了questionForm实例，和父组件的表单树无任何关联，两边的表单对象是完全独立的引用，不存在自动同步的通道

具体改造步骤 #

1. 父组件逻辑补全 #

补全新增问题的方法

新增问题时，要往QuestionsFormArray中推入和子组件结构完全对齐的FormGroup实例：

// 保留原有adminForm初始化逻辑，修改addQuestion方法
addQuestion() {
  // 构造和子组件字段结构完全一致的表单组
  const newQuestionGroup = this.fb.group({
    question: [''],
    type: ['Checkboxes'],
    required: [false],
    options: this.fb.array([
      this.fb.control('')
    ])
  });
  // 推入FormArray
  this.questions.push(newQuestionGroup);
}

调整父组件模板

遍历FormArray时，把每一个索引对应的表单组实例作为输入传给子组件，避免子组件独立创建表单：

<div *ngFor="let questionGroup of questions.controls; let i=index">
  <!-- 将当前索引的表单组通过输入属性传给子组件 -->
  <app-question [formGroupInput]="questionGroup"></app-question>
</div>
<a (click)="addQuestion()">Add question</a>

2. 子组件逻辑调整 #

移除内部独立创建的表单

子组件不再自行实例化questionForm，通过@Input接收父组件传入的表单实例，依托JS的对象引用特性实现数据自动同步：

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

@Component({
  selector: 'app-question'
})
export class QuestionComponent {
  // 定义输入属性，接收父组件传入的对应位置的FormGroup
  @Input() formGroupInput!: FormGroup;

  // 完全移除以下独立建表单的代码：
  // this.questionForm = this.fb.group({
  //   question: [''],
  //   type: ['Checkboxes'],
  //   required: [false],
  //   options: this.fb.array([this.fb.control('')])
  // });
}

调整子组件模板绑定

把子组件模板中所有原绑定questionForm的位置，替换为接收的formGroupInput即可，比如：

<!-- 替换原有的formGroup绑定 -->
<form [formGroup]="formGroupInput">
  <label>问题内容</label>
  <input formControlName="question">

  <label>问题类型</label>
  <select formControlName="type">
    <option value="Checkboxes">复选框</option>
    <option value="Text">文本输入</option>
  </select>

  <label>是否必填</label>
  <input type="checkbox" formControlName="required">
</form>

同步原理说明 #

• 所有表单实例的引用链条全部从父组件的adminForm表单树出发，通过输入属性传递给子组件，不存在两个独立的表单实例
• 因为传入的是对象引用，子组件对表单控件的修改会直接作用在父组件FormArray的对应元素上，父组件会实时感知到值变更，全程不需要额外写事件抛值、值变更订阅的同步代码
• 只要子组件不重新赋值创建自己的表单实例、直接操作传入的引用对象，就可以实现全链路的响应式数据同步

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