如何在Angular Typed Form中为FormArray设置数字数组类型？

你之前的写法无效，核心原因是FormArray 的泛型参数需要传入的是它内部单个控件的类型，而非数组本身的值类型。FormArray 本质是多个表单控件的集合，泛型要对应集合里每个元素的控件类型，不是整个集合的值类型。

下面分两种常见场景给出正确实现方式：

场景1：FormArray 存储多个单个 number 类型的控件 #

如果你的 roles 是由多个独立的数字输入控件组成的数组（比如多个角色ID输入框），正确的类型定义要让 FormArray 的泛型指向单个控件的类型：

type TypedForm = {
  roles: FormArray<FormControl<number | null>>;
};

对应的表单创建示例：

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

// 用 FormBuilder 创建
const form = this.fb.group({
  roles: this.fb.array([
    this.fb.control<number | null>(1),
    this.fb.control<number | null>(2),
    this.fb.control<number | null>(null)
  ])
});

// 手动创建方式
const rolesArray = new FormArray<FormControl<number | null>>([
  new FormControl<number | null>(1),
  new FormControl<number | null>(null)
]);
const form = new FormGroup({ roles: rolesArray });

场景2：单个控件存储 number 数组 #

如果你的需求是用一个表单控件存储整个 number 数组（比如多选下拉框选中的多个ID，值为 number[] 或 null），不需要用 FormArray，直接用 FormControl 即可：

type TypedForm = {
  roles: FormControl<number[] | null>;
};

对应的表单创建示例：

const form = this.fb.group({
  roles: this.fb.control<number[] | null>([1, 3, 5])
});

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