Angular 5中如何实现数组形式Input提交至服务器？

API 探路者

2026-5-15

确实，Angular 5里不能直接用原生HTML那种name="xyz[]"的方式来提交数组，连ngModel直接绑定数组索引也得注意一些细节。不过咱们有两种很靠谱的解决办法，分别是模板驱动表单和响应式表单，我给你详细讲讲：

方法一：使用模板驱动表单

这种方式适合简单的表单场景，步骤如下：

在组件类中定义数组
先在你的组件.ts文件里声明一个数组变量，用来存储输入框的值：
```
export class YourComponent {
  xyz: string[] = ['Lorem', 'ipsum', 'dolor', 'sit', 'amet'];
}
```
在模板中循环生成输入框
用*ngFor循环遍历数组，给每个输入框绑定对应索引的数组元素，同时要给每个输入框设置唯一的name属性（Angular模板驱动表单要求每个表单控件的name唯一）：
```
<div *ngFor="let item of xyz; let i = index">
  <input [(ngModel)]="xyz[i]" name="xyz_{{i}}" type="text" />
</div>
```
提交时传递数组
当你提交表单的时候，直接把xyz数组作为参数传给后端即可。后端接收时，参数名用xyz就可以，大多数后端框架会自动把多个同参数名的值解析成数组。

方法二：使用响应式表单（更推荐）

响应式表单是Angular推荐的表单处理方式，灵活性更强，适合复杂场景：

导入必要的表单模块
首先在组件.ts文件中导入响应式表单相关的类：

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

创建表单组和FormArray
在组件类中用FormBuilder创建包含FormArray的表单组，FormArray用来存储多个输入框的值：

export class YourComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化FormArray，预设初始值
    this.myForm = this.fb.group({
      xyz: this.fb.array([
        this.fb.control('Lorem'),
        this.fb.control('ipsum'),
        this.fb.control('dolor'),
        this.fb.control('sit'),
        this.fb.control('amet')
      ])
    });
  }

  // 方便在模板中获取FormArray的快捷方法
  get xyzArray(): FormArray {
    return this.myForm.get('xyz') as FormArray;
  }

  // 提交表单的方法
  onSubmit() {
    // 获取数组值：this.myForm.value.xyz就是我们需要的数组
    console.log('提交的数组:', this.myForm.value.xyz);
    // 这里调用HTTP服务把数组传给后端即可
  }
}

模板中绑定表单
在模板中关联表单组，用formArrayName和formControlName绑定每个输入框：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="xyz">
    <div *ngFor="let item of xyzArray.controls; let i = index">
      <input [formControlName]="i" type="text" />
    </div>
  </div>
  <button type="submit">提交</button>
</form>

补充说明

不管用哪种方式，后端接收参数时，直接用xyz作为参数名就可以，不需要加[]。Angular会自动处理数组的提交格式：如果是表单提交（application/x-www-form-urlencoded），会生成xyz=Lorem&xyz=ipsum&...这样的参数；如果是JSON提交，会直接把数组序列成JSON格式的数组，后端框架都会自动解析成数组类型。

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

Angular 5中如何实现数组形式Input提交至服务器？

补充说明 #

补充说明