Angular中根据用户输入迭代FormArray并动态生成行的问题

原代码存在的问题 #

1. 触发事件选择错误：使用(click)仅在点击输入框时触发，无法实时响应数值输入变化
2. 表单数组遍历变量冲突：循环变量名Array与Array.controls的Array重名，导致逻辑错误
3. 表单控件绑定错误：formCOntrol拼写错误，且未正确关联FormArray内的控件
4. 未关联表单数组：仅生成数字数组，未同步更新FormArray的实际控件数量

修正后的完整实现代码 #

TypeScript 部分

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  count: number = 0;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 初始化表单组，包含数量控件和空的表单数组
    this.form = this.fb.group({
      qty: [0],
      items: this.fb.array([])
    });
  }

  // 便捷获取表单数组的方法
  get itemsArray(): FormArray {
    return this.form.get('items') as FormArray;
  }

  setCount(count: string) {
    const targetCount = parseInt(count) || 0;
    const currentItemCount = this.itemsArray.length;

    // 根据目标数量添加或移除表单组
    if (targetCount > currentItemCount) {
      for (let i = currentItemCount; i < targetCount; i++) {
        // 为每行创建包含number控件的表单组
        this.itemsArray.push(this.fb.group({
          number: ['']
        }));
      }
    } else if (targetCount < currentItemCount) {
      // 移除多余的表单组，直到数量匹配
      while (this.itemsArray.length > targetCount) {
        this.itemsArray.removeAt(this.itemsArray.length - 1);
      }
    }
    this.count = targetCount;
  }
}

HTML 部分

<form [formGroup]="form">
  <mat-form-field class="full-width">
    <mat-label>数量</mat-label>
    <input 
      matInput 
      type="number" 
      formControlName="qty" 
      (input)="setCount($event.target.value)" 
      min="0"
    >
  </mat-form-field>

  <table>
    <!-- 绑定表单数组到tbody -->
    <tbody formArrayName="items">
      <!-- 遍历表单数组的控件，绑定每个表单组 -->
      <tr *ngFor="let item of itemsArray.controls; let i = index;" [formGroupName]="i">
        <td>{{ i + 1 }}</td>
        <td>
          <!-- 绑定对应表单组内的number控件 -->
          <input 
            type="text" 
            formControlName="number" 
            class="form-control" 
            style="width:700px"
            placeholder="输入编号"
          >
        </td>
      </tr>
    </tbody>
  </table>
</form>

核心要点说明 #

• 使用FormBuilder构建表单结构，确保FormArray与表单组正确关联
• 采用(input)事件实时监听数值变化，保证输入数量与表格行数同步
• 通过itemsArray.controls遍历表单控件，避免变量名冲突
• 在setCount方法中动态调整FormArray的控件数量，新增时创建包含对应字段的表单组，删除时移除多余控件
• 表格行通过formGroupName绑定到FormArray的对应索引，确保表单控件数据正确关联

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