Angular中如何使用FormArray获取表单全部数据并提交为数组格式

1. 导入依赖 #

首先在对应的Angular模块中导入ReactiveFormsModule，确保响应式表单功能可用：

// 对应模块文件，比如app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    ReactiveFormsModule
  ]
})

之后在业务组件的TS文件中导入需要的表单类：

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

2. 组件TS中初始化表单 #

我们先定义固定的社交平台列表，再初始化FormArray，每个表单项对应一个平台的信息，包含platform（平台名称）和url（用户输入的链接）两个字段，匹配你需要的数组结构：

export class YourComponent {
  // 定义固定的社交平台配置
  socialPlatforms = ['Instagram', 'Facebook', 'Linkedin'];
  socialForm: FormGroup;

  constructor() {
    // 初始化表单，FormArray里每个元素是对应平台的FormGroup
    this.socialForm = new FormGroup({
      socialLinks: new FormArray(
        this.socialPlatforms.map(platform => {
          return new FormGroup({
            platform: new FormControl(platform),
            url: new FormControl('')
          });
        })
      )
    });
  }

  // 便捷获取FormArray的getter，简化后续调用
  get socialLinksArray(): FormArray {
    return this.socialForm.get('socialLinks') as FormArray;
  }

  // 提交表单方法
  onSubmit() {
    // 这里拿到的就是符合要求的数组格式，可直接提交给后端
    const submitData = this.socialForm.value.socialLinks;
    // 后续提交逻辑
  }
}

3. 改造模板代码 #

提供两种模板写法，可根据你的需求选择：

写法1：循环生成输入项（推荐，可扩展性更高） #

<form [formGroup]="socialForm" (ngSubmit)="onSubmit()">
  <div formArrayName="socialLinks">
    <div *ngFor="let linkGroup of socialLinksArray.controls; let i = index" [formGroupName]="i">
      <mat-form-field class='social-input lg:social-input-lg mt-8'>
        <input matInput type='text' [placeholder]="linkGroup.value.platform + ' URL'" formControlName="url">
      </mat-form-field>
    </div>
  </div>
  <button type="submit">提交</button>
</form>

写法2：保留原有的静态输入项结构 #

<form [formGroup]="socialForm" (ngSubmit)="onSubmit()">
  <div formArrayName="socialLinks">
    <!-- 对应Instagram，索引为0 -->
    <div formGroupName="0">
      <mat-form-field class='social-input lg:social-input-lg mt-8'>
        <input  matInput type='text' placeholder="Instagram URL" formControlName="url">
      </mat-form-field>
    </div>
    <!-- 对应Facebook，索引为1 -->
    <div formGroupName="1">
      <mat-form-field class='social-input lg:social-input-lg mt-8'>
        <input  matInput type='text' placeholder="facebook URL" formControlName="url">
      </mat-form-field>
    </div>
    <!-- 对应Linkedin，索引为2 -->
    <div formGroupName="2">
      <mat-form-field class='social-input lg:social-input-lg'>
        <input matInput type='text' placeholder="Linkedin URL" formControlName="url">
      </mat-form-field>
    </div>
  </div>
  <button type="submit">提交</button>
</form>

最终输出结构 #

提交时获取的submitData结构如下，和要求的数组格式完全匹配：

[
  {platform: "Instagram", url: "用户输入的Instagram链接"},
  {platform: "Facebook", url: "用户输入的Facebook链接"},
  {platform: "Linkedin", url: "用户输入的Linkedin链接"}
]

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