如何通过Angular响应式表单生成含多价格字段的目标JSON对象

看起来你已经搭好了基础的响应式表单框架，但问题出在没有根据stations数组的长度动态生成FormArray元素，而且表单控件和UI输入框的绑定逻辑也没对应上。我帮你梳理下正确的实现方式：

1. 组件逻辑调整（Component.ts） #

首先要根据items.stations的数量来初始化object这个FormArray，而不是只添加一个默认元素。另外我们可以封装一个快捷方法来获取FormArray，方便模板调用：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  myForm: FormGroup;
  items = {
    "departure":"New York",
    "arrival":"California",
    "stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]
  };

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    // 关键：根据stations的数量，动态生成对应数量的price表单组
    this.myForm = this._fb.group({
      object: this._fb.array(
        this.items.stations.map(() => this.initPriceGroup())
      )
    });
  }

  // 创建单个price的表单组
  initPriceGroup() {
    return this._fb.group({
      price: [''] // 可根据需求设置默认值，比如'00'
    });
  }

  // 快捷方法：获取object对应的FormArray，模板里直接用这个方法更简洁
  get objectArray(): FormArray {
    return this.myForm.get('object') as FormArray;
  }

  // 提交表单处理
  onSubmit() {
    if (this.myForm.valid) {
      // 表单值已经是你需要的{object: [{price: '输入值1'}, {price: '输入值2'}, ...]}格式
      const submitData = this.myForm.value;
      console.log('提交的JSON:', submitData);
      // 这里可以调用API提交submitData
    }
  }
}

2. 模板调整（HTML） #

模板里要把每个station和对应的price输入框绑定起来，确保遍历逻辑和FormArray的元素一一对应：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <!-- 展示原有的出发地、目的地信息（如果需要保留） -->
  <div class="route-info">
    <p>出发地: {{ items.departure }}</p>
    <p>目的地: {{ items.arrival }}</p>
  </div>

  <!-- 遍历stations和对应的FormArray元素 -->
  <div formArrayName="object">
    <div *ngFor="let priceGroup of objectArray.controls; let i = index" 
         [formGroupName]="i"
         class="station-item">
      <p>站点: {{ items.stations[i].station }}</p>
      <input type="text" formControlName="price" placeholder="输入该站点价格">
    </div>
  </div>

  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>

关键细节说明 #

• 动态生成FormArray：通过this.items.stations.map(() => this.initPriceGroup())，我们为每个station创建一个对应的price输入控件，确保输入框数量和站点数量完全匹配。
• 表单绑定逻辑：用formArrayName="object"指定数组容器，[formGroupName]="i"绑定每个数组元素，formControlName="price"把输入框和对应的FormControl关联起来，这样输入值会自动同步到表单中。
• 提交数据格式：表单的value属性直接就是你需要的{object: [...]}结构，无需额外转换，直接拿来提交即可。

这样调整后，点击提交按钮就能得到符合要求的JSON对象了。如果需要添加表单验证、样式优化等，再根据需求微调即可。

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