Angular中为string键、对象值的Record类型选哪种表单类型？

针对你的场景，FormRecord<FormGroup>是最适合的选择，理由和实现方案如下：

选型依据 #

• FormGroup适合键固定已知的表单结构，而你的groups是动态键的Record<string, GroupedSignals>（键是动态生成的groupId），FormRecord专门为这种动态字符串键的集合设计，类型匹配度更高，动态增删控件的操作也更便捷。
• 每个GroupedSignals对象包含多个属性，需要用FormGroup来映射这些属性对应的表单控件，因此外层用FormRecord包裹FormGroup，正好对应Record<string, GroupedSignals>的层级结构。

实现步骤 #

1. 编写GroupedSignals的表单组工厂函数 #

先封装一个函数，把GroupedSignals的属性转换成对应的FormGroup（注意：signals和selectionModel属于UI层状态，通常不需要加入表单，若需持久化可自行调整）：

function createGroupedSignalFormGroup(group?: GroupedSignals): FormGroup {
  return new FormGroup({
    groupName: new FormControl(group?.groupName ?? null),
    groupId: new FormControl(group?.groupId ?? '', Validators.required),
    isOpenByDefault: new FormControl(group?.isOpenByDefault ?? false),
    selectedColumns: new FormControl(group?.selectedColumns ?? []),
    isAllSignalSelected: new FormControl(group?.isAllSignalSelected ?? false),
    expanded: new FormControl(group?.expanded ?? false),
    // 若需持久化signals，可序列化存储其data数组
    // signals: new FormControl(group?.signals?.data ?? []),
  });
}

2. 完善createForm方法 #

在SignalListConfig的静态方法中初始化FormRecord，支持传入初始配置生成对应表单：

@inheritSerialization(WidgetConfigModel)
export class SignalListConfig extends WidgetConfigModel {
  @deserialize public signals: Record<SignalModel['Id'], GroupedSignals['groupId'] | 'ungrouped'> = {};
  @deserialize public groups: Record<GroupedSignals['groupId'], GroupedSignals> = {};

  public static override createForm(initialConfig?: SignalListConfig) {
    // 初始化groups的FormRecord
    const groupsFormRecord = new FormRecord<FormGroup>({});
    
    // 若有初始数据，批量生成对应FormGroup
    if (initialConfig?.groups) {
      Object.entries(initialConfig.groups).forEach(([groupId, group]) => {
        groupsFormRecord.addControl(groupId, createGroupedSignalFormGroup(group));
      });
    }

    return {
      ...super.createForm(),
      signals: new FormRecord<FormControl<string | 'ungrouped'>>({}, {validators: [Validators.required]}),
      groups: groupsFormRecord,
    };
  }
}

3. 动态增删组的操作示例 #

利用FormRecord的addControl和removeControl方法处理动态键的变化：

// 组件内添加新组
addNewGroup(groupId: string, groupData?: Partial<GroupedSignals>) {
  const groupsForm = this.signalListForm.get('groups') as FormRecord<FormGroup>;
  if (!groupsForm.contains(groupId)) {
    groupsForm.addControl(groupId, createGroupedSignalFormGroup(groupData as GroupedSignals));
  }
}

// 组件内删除组
removeGroup(groupId: string) {
  const groupsForm = this.signalListForm.get('groups') as FormRecord<FormGroup>;
  groupsForm.removeControl(groupId);
}

关键优势 #

• 类型安全：FormRecord<FormGroup>与Record<string, GroupedSignals>结构完全对应，TypeScript会提供完整的类型检查，避免控件类型错误。
• 动态适配：天然支持groupId的新增/删除，无需手动修改表单结构。
• 值映射便捷：提交表单时，groups的表单值可直接转换为Record<string, GroupedSignals>格式（剔除未加入表单的属性），直接用于更新配置对象。

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