Angular响应式表单生成多价格JSON对象问题求助

看起来你遇到的核心问题是表单数组初始化和模板绑定不匹配，导致最终只能获取到一个价格值。让我一步步帮你解决：

问题根源分析 #

你当前的代码里：

1. 表单数组tabls只初始化了一个表单组（initArray2()），所以无论模板里有多少个输入框，最终只会提交这一个组的值。
2. 模板里的两个价格输入框都绑定到了同一个formControlName="price"，这会导致第二个输入框直接覆盖第一个的值，最终只保留最后输入的价格。

解决方案步骤 #

1. 初始化包含两个表单组的表单数组

修改ngOnInit方法，让tabls数组包含两个独立的表单组，分别对应你模板里的两个价格输入项：

ngOnInit() {
  this.myForm = this._fb.group({
    tabls: this._fb.array([
      this.initArray2(), // 对应第一个价格（departure → station）
      this.initArray2()  // 对应第二个价格（departure → arrival）
    ]),
  })
}

initArray2() {
  return this._fb.group({
    price: [''],
  });
}

2. 调整模板绑定，让每个输入框对应独立的表单组

原来的模板把两个输入框放在同一个formGroupName下，现在需要拆分它们，分别绑定到数组的第0和第1个索引：

<div formArrayName="tabls">
  <!-- 第一个价格项：出发地 → 中途站 -->
  <div [formGroupName]="0">
    <div class="row">
      <div class="col-sm-4" >
        <div >
          <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
            <i class="glyphicon markerx" style="border: 5px solid #FED141"></i>
          </div>
          <span >{{items.departure}}</span>
        </div>
      </div>
      <div class="col-sm-1" ><img style=" width: 32px; height: 22px;" src="../assets/img/arrow.svg" ></div>
      <div class="col-sm-4" >
        <span *ngIf="items.stations.length > 0"> {{items.stations[0].station}} </span>
        <span *ngIf="items.stations.length === 0"> {{items.arrival}} </span>
      </div>
      <div class="col-sm-3" >
        <div class="input-group " >
          <input type="number" formControlName="price" value="1000" min="0" step="1" 
                 [attr.id]="'textbox'" data-number-to-fixed="2" data-number-stepfactor="100" 
                 class="form-control currency" />
          <span class="input-group-addon">Dhs</span>
        </div>
      </div>
    </div>
    <hr/>
  </div>

  <!-- 第二个价格项：出发地 → 目的地 -->
  <div [formGroupName]="1">
    <div class="row">
      <div *ngIf="items?.arrival && items?.departure">
        <div class="col-sm-4">
          <div style="">
            <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
              <i class="glyphicon markerx" style="border: 5px solid #63a599"></i>
            </div>
            <span>{{items.departure}}</span>
          </div>
        </div>
        <div class="col-sm-1" >
          <img style=" width: 32px; height: 22px;" src="../assets/img/arrow.svg" >
        </div>
        <div class="col-sm-4" >
          <div style="">
            <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
              <i class="glyphicon markerx" style="border: 5px solid #F53F5B"></i>
            </div>
            <span>{{items.arrival}}</span>
          </div>
        </div>
        <div class="col-sm-3" >
          <div class="input-group ">
            <input type="number" formControlName="price" value="1000" min="0" step="1" 
                   [attr.id]="'finalprice'" data-number-to-fixed="2" data-number-stepfactor="100" 
                   class="form-control currency" />
            <span class="input-group-addon">Dhs</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3. 验证save函数的输出

你的save()函数只需要获取表单的value即可，现在会自动生成你期望的JSON结构：

save() {
  console.log(this.myForm.value);
  // 输出: {"tabls":[{"price":20},{"price":10}]}
}

扩展：如果需要动态添加更多价格项 #

如果以后需要支持动态添加价格项，可以添加一个按钮和对应的方法：

addPriceItem() {
  const tablsArray = this.myForm.get('tabls') as FormArray;
  tablsArray.push(this.initArray2());
}

模板中添加按钮：

<button class="btn btn-primary" (click)="addPriceItem()">添加新价格项</button>

这样每次点击按钮都会往表单数组里新增一个价格输入项，提交时也会包含所有项的值。

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