Angular Reactive Form 如何实现含多个地址的嵌套表单结构

你当前实现中address字段为单个FormGroup，仅能存储1条地址数据，要支持多地址录入需要使用Angular表单提供的FormArray容器。

注意：你贴出的期望JSON存在语法错误，多条地址数据需要用数组包裹，合法的输出结构如下：

{
  "name": "name",
  "age": "age",
  "address": [
    {
      "city": "cityA",
      "street": "streetA"
    },
    {
      "city": "cityB",
      "street": "streetB"
    }
  ]
}

代码实现步骤 #

• 第一步：调整表单初始化逻辑，将address字段替换为FormArray，封装地址表单组的创建方法方便复用

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 表单初始化
this.form = this.fb.group({
  name: [''],
  age: [''],
  // 地址字段改为FormArray，默认初始化1条空地址
  address: this.fb.array([this.createAddressItem()])
});

// 生成单条地址表单组的复用方法
createAddressItem(): FormGroup {
  return this.fb.group({
    city: [''],
    street: ['']
  });
}

• 第二步：新增地址条目的增删方法，方便模板交互调用

// 快捷获取地址表单数组实例
get addressArray(): FormArray {
  return this.form.get('address') as FormArray;
}

// 新增一条空地址
addNewAddress(): void {
  this.addressArray.push(this.createAddressItem());
}

// 删除指定索引位置的地址
removeAddress(index: number): void {
  if (this.addressArray.length > 1) {
    this.addressArray.removeAt(index);
  }
}

• 第三步：编写模板代码，循环渲染FormArray中的所有地址项，绑定表单控件

<form [formGroup]="form">
  <!-- 基础字段 -->
  <div>
    <label>姓名</label>
    <input formControlName="name">
  </div>
  <div>
    <label>年龄</label>
    <input formControlName="age">
  </div>

  <!-- 地址列表区域 -->
  <div>
    <h4>录入地址</h4>
    <div *ngFor="let item of addressArray.controls; let idx = index" [formGroupName]="idx">
      <div>
        <label>城市</label>
        <input formControlName="city">
      </div>
      <div>
        <label>街道</label>
        <input formControlName="street">
      </div>
      <button type="button" (click)="removeAddress(idx)">删除当前地址</button>
    </div>
    <button type="button" (click)="addNewAddress()">添加新地址</button>
  </div>
</form>

完成上述配置后，提交表单时调用this.form.value即可拿到符合要求的结构化数据，address字段会自动输出为包含多条地址对象的数组。

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