如何构建匹配数据结构的嵌套Angular响应式表单组？

你的messaging是数组类型，必须用FormArray来对应，而不是直接用FormGroup，这是导致错误的核心原因。下面是完整的实现步骤：

1. 组件内定义表单结构 #

用FormBuilder创建包含FormArray的主表单，完全匹配你的数据模型：

// component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  mainForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化主表单，messaging为FormArray，默认包含一个嵌套结构的FormGroup
    this.mainForm = this.fb.group({
      messaging: this.fb.array([
        this.fb.group({
          email: this.fb.group({
            fromName: [''],
            fromAddress: ['']
          })
        })
      ])
    });
  }

  // 模板中快捷获取messaging FormArray的方法
  get messagingArray(): FormArray {
    return this.mainForm.get('messaging') as FormArray;
  }

  ngOnInit(): void {
    // 从数据库加载数据后，用patchValue赋值到表单
    const dbData = {
      messaging: [
        {
          email: {
            fromName: "No Reply <noreply@example.com>",
            fromAddress: "noreply@example.com"
          }
        }
      ]
    };
    this.mainForm.patchValue(dbData);
  }
}

2. 模板中绑定表单结构 #

注意formArrayName、formGroupName的层级对应，不能混淆：

<!-- your-component.component.html -->
<form [formGroup]="mainForm">
  <!-- 绑定messaging对应的FormArray -->
  <div formArrayName="messaging">
    <!-- 遍历FormArray中的每一项FormGroup -->
    <div *ngFor="let item of messagingArray.controls; let i = index" [formGroupName]="i">
      <!-- 绑定嵌套的email FormGroup -->
      <div formGroupName="email">
        <label>发件人名称:</label>
        <input type="text" formControlName="fromName">

        <label>发件人邮箱:</label>
        <input type="email" formControlName="fromAddress">
      </div>
    </div>
  </div>
</form>

错误原因解析 #

• 用[formGroup]="messaging"报错：因为messaging是FormArray实例，不是FormGroup，formGroup指令仅接受FormGroup类型。
• 用formGroupName="messaging"报错：因为没有先在父表单上声明formArrayName="messaging"，且未正确初始化messaging为FormArray，导致Angular找不到对应的表单实例。

扩展说明 #

如果需要动态添加/删除messaging数组项，可以通过以下方法实现：

// 添加新的messaging项
addMessagingItem() {
  this.messagingArray.push(
    this.fb.group({
      email: this.fb.group({
        fromName: [''],
        fromAddress: ['']
      })
    })
  );
}

// 删除指定索引的messaging项
removeMessagingItem(index: number) {
  this.messagingArray.removeAt(index);
}

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