Angular中FormArray添加行函数异常：仅生成单个输入控件

你的核心问题是误用了FormControl来封装整行字段——每一行的多个输入项应该是一个FormGroup，FormArray的每一项都应该是这个FormGroup实例，而非单个FormControl。当前代码把整行对象当成单个控件，导致前端只能识别出一个输入控件。

修正后的addRows函数 #

将new FormControl替换为new FormGroup，把每个字段定义为独立的FormControl：

addRows() {
  switch (this.selectedRadioButton) {
    case "General":
      (this.tableLineItems as FormArray).push(new FormGroup({
        ChargeCode: new FormControl(''),
        ChargeCodeDescription: new FormControl(''),
        Type: new FormControl(''),
        VAT: new FormControl(''),
        ActualAmount: new FormControl(''),
        ReveneAmount: new FormControl(''),
        FirstPaymentReference: new FormControl(''),
        isEditable: new FormControl(true)
      }));
      break;
    case "Currency":
      (this.tableLineItems as FormArray).push(new FormGroup({
        ChargeCode: new FormControl('', Validators.required),
        ChargeCodeDescription: new FormControl('', [Validators.email]),
        Currency: new FormControl('', [Validators.required]),
        ROE: new FormControl('', [Validators.required]),
        ForeignAmount: new FormControl('', [Validators.required]),
        InvoiceAmount: new FormControl('', [Validators.required]),
        ActualAmount: new FormControl('', [Validators.required, Validators.maxLength(10)]),
        ReveneAmount: new FormControl('', [Validators.required, Validators.maxLength(10)]),
        FirstPaymentReference: new FormControl('', [Validators.required, Validators.maxLength(10)]),
        isEditable: new FormControl(true)
      }));
      break;
  }
}

前端模板配合示例 #

确保模板正确遍历FormArray，并为每个FormGroup的控件绑定独立输入框：

<form [formGroup]="yourMainForm">
  <div formArrayName="tableLineItems">
    <!-- 遍历FormArray中的每一行FormGroup -->
    <div *ngFor="let row of tableLineItems.controls; let i = index" [formGroupName]="i">
      <!-- 基础字段 -->
      <input formControlName="ChargeCode" placeholder="Charge Code">
      <input formControlName="ChargeCodeDescription" placeholder="Description">
      
      <!-- 根据选中的单选框渲染对应字段 -->
      <ng-container *ngIf="selectedRadioButton === 'General'">
        <input formControlName="Type" placeholder="Type">
        <input formControlName="VAT" placeholder="VAT">
      </ng-container>
      
      <ng-container *ngIf="selectedRadioButton === 'Currency'">
        <input formControlName="Currency" placeholder="Currency">
        <input formControlName="ROE" placeholder="ROE">
        <input formControlName="ForeignAmount" placeholder="Foreign Amount">
        <input formControlName="InvoiceAmount" placeholder="Invoice Amount">
      </ng-container>
      
      <!-- 通用字段 -->
      <input formControlName="ActualAmount" placeholder="Actual Amount">
      <input formControlName="ReveneAmount" placeholder="Revenue Amount">
      <input formControlName="FirstPaymentReference" placeholder="Payment Reference">
    </div>
  </div>
  <button (click)="addRows()">添加行</button>
</form>

关键说明 #

• FormArray存储的是FormGroup实例，每个FormGroup对应一行的所有表单控件；
• 模板必须通过formGroupName绑定数组索引，才能正确关联每个FormGroup下的独立控件；
• 根据选中的单选框动态渲染对应字段，确保界面只显示当前类型需要的输入项。

内容的提问来源于stack exchange，提问作者Matthew Falcoa Pereira