Angular响应式表单数组提交Laravel时字段名格式问题

问题根源 #

PHP（包括Laravel）的表单解析规则要求数组类型的字段名必须以[]结尾（比如array_field[]），重复提交的同名字段才会被解析为数组。而Angular在将响应式表单的数组/FormArray转换为FormData时，默认只会重复使用不带[]的字段名，导致Laravel仅保留最后一个提交值。

解决方案：手动构建带[]后缀的FormData #

全程保留响应式表单写法，仅在提交前手动遍历表单控件，对数组类型字段做特殊处理：

1. 定义响应式表单结构（示例）：

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

// 组件内初始化表单
constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    username: [''],
    // 多选下拉框绑定的数组字段，用FormControl存储数组值即可
    array_field: this.fb.control([])
    // 如果是动态添加的多控件场景，用FormArray：
    // array_field: this.fb.array([])
  });
}

2. 提交时构建兼容Laravel的FormData：

submitForm() {
  const formData = new FormData();
  
  // 遍历所有表单控件
  Object.keys(this.form.controls).forEach(key => {
    const control = this.form.get(key);
    
    if (control instanceof FormArray) {
      // 处理FormArray：每个元素以`key[]`为字段名追加
      control.value.forEach(item => {
        formData.append(`${key}[]`, item);
      });
    } else if (Array.isArray(control.value)) {
      // 处理绑定多选下拉的FormControl（值为数组）
      control.value.forEach(item => {
        formData.append(`${key}[]`, item);
      });
    } else {
      // 普通字段直接追加
      formData.append(key, control.value);
    }
  });
  
  // 发送POST请求到Laravel后端
  this.http.post('/api/your-endpoint', formData).subscribe({
    next: (res) => console.log('提交成功', res),
    error: (err) => console.error('提交失败', err)
  });
}

3. 模板中的多选下拉绑定示例：

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <input formControlName="username" placeholder="用户名">
  
  <!-- 多选下拉框绑定数组类型的FormControl -->
  <select multiple formControlName="array_field">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
  
  <button type="submit">提交</button>
</form>

验证Laravel端接收 #

提交后，在Laravel控制器中可直接通过$request->array_field获取完整数组：

public function store(Request $request)
{
    $arrayValues = $request->array_field; // 得到完整数组，而非单个值
    // 后续业务逻辑处理
}

内容的提问来源于stack exchange，提问作者Kristjan O.