Angular动态创建车辆分期表单并映射数据模型的实现求助

用Angular的FormArray来管理动态重复表单，天然通过索引关联表单控件与数据模型，完美匹配你的需求。

1. 组件TS代码实现 #

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

@Component({
  selector: 'app-vehicle-instalments',
  templateUrl: './vehicle-instalments.component.html',
  styleUrls: ['./vehicle-instalments.component.css']
})
export class VehicleInstalmentsComponent implements OnInit {
  public form: FormGroup;
  private readonly MAX_VEHICLES = 3;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      vehicleInstalments: this.fb.array([this.createVehicleFormGroup()])
    });
  }

  get vehicleInstalments(): FormArray {
    return this.form.get('vehicleInstalments') as FormArray;
  }

  private createVehicleFormGroup(): FormGroup {
    return this.fb.group({
      currentInstalment: ['', [Validators.required, Validators.min(0)]],
      isSettling: [false],
      accountNumber: [''],
      financedBy: ['']
    });
  }

  addVehicleInstalment(): void {
    if (this.vehicleInstalments.length < this.MAX_VEHICLES) {
      this.vehicleInstalments.push(this.createVehicleFormGroup());
    }
  }

  submitForm(): void {
    if (this.form.valid) {
      const existingVehicleAccounts = this.vehicleInstalments.value;
      // 此处可添加数据提交逻辑（如调用API）
      console.log('映射后的数据模型:', existingVehicleAccounts);
    }
  }
}

2. HTML模板实现 #

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <div formArrayName="vehicleInstalments">
    <div *ngFor="let vehicleForm of vehicleInstalments.controls; let i = index" 
         [formGroupName]="i" 
         class="vehicle-module">
      <h3>车辆分期 {{ i + 1 }}</h3>

      <div>
        <label>Current vehicle instalment</label>
        <input type="number" formControlName="currentInstalment" required>
      </div>

      <div>
        <label>
          <input type="checkbox" formControlName="isSettling">
          I am settling this account
        </label>
      </div>

      <div *ngIf="vehicleForm.get('isSettling').value" class="extra-fields">
        <div>
          <label>Account number</label>
          <input type="text" formControlName="accountNumber">
        </div>
        <div>
          <label>Financed by</label>
          <select formControlName="financedBy">
            <option value="">请选择</option>
            <option value="bank">银行</option>
            <option value="dealer">经销商</option>
            <option value="other">其他</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <button type="button" 
          (click)="addVehicleInstalment()"
          *ngIf="vehicleInstalments.length < 3">
    Add another vehicle instalment
  </button>

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

关键说明 #

• 索引自动关联：每个动态表单组通过index与existingVehicleAccounts数组下标一一对应，表单值可直接映射为目标数组结构，无需手动维护关联关系。
• 复选框字段控制：通过*ngIf="vehicleForm.get('isSettling').value"直接根据控件值切换额外字段显示状态，逻辑简洁。
• 数量限制：通过判断vehicleInstalments.length < 3控制添加按钮的显示，确保最多生成3个表单模块。
• 数据映射：提交时直接取vehicleInstalments.value即可得到符合要求的existingVehicleAccounts数组，无需额外转换。

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