Angular 18中如何实现包含文本表单控件数组的响应式表单？

我来帮你把这个文本数组的响应式表单给捋明白，结合你已经写的代码，一步步落地实现哈：

第一步：补全FormArray的初始化逻辑 #

你已经声明了包含FormArray的FormGroup，接下来要把foo.bar里的每一个字符串都转成FormControl并添加到数组里，补全后的代码是这样的：

import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

// 假设你已经获取到了目标foo实例
foo: Foo = { bar: ['初始文本行1', '初始文本行2'] }; // 示例数据

barEditForm = new FormGroup({
  bar: new FormArray<FormControl<string | null>>([])
});

ngOnInit(): void {
  // 遍历foo.bar，把每一项转成带初始值的FormControl加入数组
  this.foo.bar.forEach((textLine) => {
    // 可按需添加验证器，比如必填校验
    const textControl = new FormControl(textLine, [Validators.required]);
    this.barArray.push(textControl);
  });
}

// 封装一个getter，方便模板里快速访问FormArray，避免重复类型断言
get barArray(): FormArray<FormControl<string | null>> {
  return this.barEditForm.get('bar') as FormArray<FormControl<string | null>>;
}

第二步：在模板里渲染表单控件 #

接下来要在组件模板里循环渲染每一个文本输入框，同时添加上新增、删除行的操作按钮，用Angular 18推荐的@for语法更高效：

<form [formGroup]="barEditForm" (ngSubmit)="handleSubmit()">
  <!-- 绑定FormArray的名称 -->
  <div formArrayName="bar">
    <!-- 循环渲染每个FormControl -->
    @for (control of barArray.controls; track control; let i = $index) {
      <div class="input-group mb-2">
        <input 
          type="text" 
          [formControlName]="i" 
          class="form-control"
          placeholder="请输入文本内容"
        >
        <button 
          type="button" 
          class="btn btn-danger"
          (click)="removeTextLine(i)"
          [disabled]="barArray.length === 1" <!-- 至少保留一行输入框 -->
        >
          删除
        </button>
      </div>
    }
  </div>

  <!-- 新增文本行按钮 -->
  <button type="button" class="btn btn-primary mb-3" (click)="addNewTextLine()">
    新增一行
  </button>

  <!-- 表单提交按钮 -->
  <button type="submit" class="btn btn-success" [disabled]="!barEditForm.valid">
    提交修改
  </button>
</form>

第三步：实现增删和提交的逻辑 #

回到组件类里，添加上对应的操作方法，完成整个交互流程：

// 新增一行空的文本输入框
addNewTextLine(): void {
  this.barArray.push(new FormControl('', [Validators.required]));
}

// 删除指定索引的文本行
removeTextLine(index: number): void {
  this.barArray.removeAt(index);
}

// 处理表单提交
handleSubmit(): void {
  if (this.barEditForm.valid) {
    // 获取表单里的文本数组，可按需过滤空值
    const updatedBarLines = this.barEditForm.value.bar?.filter(line => line) as string[];
    // 这里可以把更新后的数组赋值给foo，或者提交到后端
    this.foo.bar = updatedBarLines;
    console.log('更新后的文本行数组:', updatedBarLines);
    // 可在这里添加提交成功提示、重置表单等逻辑
  }
}

一些实用提示 #

• 用getter封装barArray是为了让模板代码更简洁，同时保证类型安全，不用每次都写冗长的类型断言。
• 如果你不需要必填校验，直接去掉Validators.required即可，灵活调整验证规则。
• 可以给输入框添加样式或者自定义错误提示，提升用户体验。

备注：内容来源于stack exchange，提问作者Vihung