Angular 14 泛型严格类型响应式表单：FormArray泛型接口实现咨询

先从最基础的场景入手，如果你需要对应原始类型数组的FormArray（比如string[]、number[]这类），可以直接定义一个泛型类型：

export type ModelFormArray<T> = FormArray<FormControl<T>>;

这个类型会把数组里的每个元素都映射成对应的FormControl<T>，比如ModelFormArray<string>就等价于FormArray<FormControl<string>>。

如果你的数组元素是对象类型，需要用FormGroup映射的话，直接结合你已有的ModelFormGroup就能实现嵌套泛型：

// 针对对象数组的FormArray，每个元素都是对应T的ModelFormGroup
export type ModelFormArrayOfGroups<T> = FormArray<ModelFormGroup<T>>;

举个实际例子，假设你有用户类型：

interface User {
  name: string;
  age: number;
}

那ModelFormArrayOfGroups<User>就等价于FormArray<FormGroup<{name: FormControl<string>; age: FormControl<number>}>>，完全匹配对象数组的结构。

如果需要更灵活的场景（比如FormArray里可以是任意类型的AbstractControl），还可以定义通用版：

// 通用版：FormArray的元素可以是任意AbstractControl类型
export type GenericFormArray<C extends AbstractControl = AbstractControl> = FormArray<C>;

比如你需要创建混合类型的FormArray（虽然不推荐，但偶尔会用到），就可以这么用：

// 包含FormControl和FormGroup的混合数组
type MixedArray = GenericFormArray<FormControl<string> | ModelFormGroup<User>>;

使用示例 #

结合你的ModelFormGroup和新增的ModelFormArrayOfGroups，给个完整的使用案例：

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

interface User {
  name: string;
  age: number;
}

// 你的原有定义
export type ModelFormGroup<T> = FormGroup<{[K in keyof T]: FormControl<T[K]>;}>;
// 新增的对象数组FormArray定义
export type ModelFormArrayOfGroups<T> = FormArray<ModelFormGroup<T>>;

@Component({ /* 组件配置 */ })
export class YourComponent {
  usersForm: ModelFormArrayOfGroups<User>;

  constructor(private fb: FormBuilder) {
    // 初始化包含两个用户的FormArray
    this.usersForm = this.fb.array([
      this.fb.group({
        name: ['Alice'],
        age: [30]
      }) as ModelFormGroup<User>,
      this.fb.group({
        name: ['Bob'],
        age: [25]
      }) as ModelFormGroup<User>
    ]);
  }

  // 添加新用户
  addUser() {
    this.usersForm.push(
      this.fb.group({
        name: [''],
        age: [0]
      }) as ModelFormGroup<User>
    );
  }
}

这样就能在类型层面完全约束FormArray的结构，避免类型不匹配的问题。

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