如何在Angular中定义带递归字段的强类型表单？

问题描述 #

尝试在Angular中定义带递归字段的强类型表单时，编写了以下接口与初始化函数：

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

export interface ICodeSystemConceptForm {
  code: FormControl<string>;
  display: FormControl<string>;
  definition: FormControl<string>;
  concept: FormArray<FormControl<ICodeSystemConceptForm>>;
}

export const initCodeSystemConceptForm = (concept?: fhir4.CodeSystemConcept, codeDisabled = false): ICodeSystemConceptForm => {
  return {
    code: new FormControl(
      {
        value: concept?.code || '',
        disabled: codeDisabled,
      },
      [ Validators.required ]
    ),
    display: new FormControl(concept?.display || ''),
    definition: new FormControl(concept?.definition || ''),
    concept: new FormArray(concept?.concept?.map(nestedConcept => initCodeSystemConceptForm(nestedConcept)) || []),
  });
};

编译器报错：

Argument of type 'ICodeSystemConceptForm[]' is not assignable to parameter of type 'AbstractControl<any, any>[]'. Type 'ICodeSystemConceptForm' is missing the following properties from type 'AbstractControl<any, any>'

尝试修改接口中concept的类型为FormArray<FormGroup<ICodeSystemConceptForm>>、FormArray<ICodeSystemConceptForm>或ICodeSystemConceptForm[]，均出现类似错误：

Type 'ICodeSystemConceptForm' does not satisfy the constraint 'AbstractControl<any, any>'. Type 'ICodeSystemConceptForm' is missing the following properties from type 'AbstractControl<any, any>': _parent, _asyncValidationSubscription, value, validator, and 51 more.ts(2344)

错误原因 #

ICodeSystemConceptForm是表单组的结构类型定义，并非Angular表单控件（AbstractControl子类：FormControl/FormGroup/FormArray）。之前的核心错误：

• 初始化函数直接返回普通对象（类型为ICodeSystemConceptForm），而非Angular的FormGroup实例
• FormArray要求元素必须是AbstractControl子类实例，但传入的是普通对象，类型不匹配

修正后的代码 #

正确的接口定义 #

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

export interface ICodeSystemConceptForm {
  code: FormControl<string>;
  display: FormControl<string>;
  definition: FormControl<string>;
  // FormArray中存放递归的FormGroup实例
  concept: FormArray<FormGroup<ICodeSystemConceptForm>>;
}

正确的表单初始化函数 #

import { Validators } from '@angular/forms'; // 需导入Validators

export const initCodeSystemConceptForm = (concept?: fhir4.CodeSystemConcept, codeDisabled = false): FormGroup<ICodeSystemConceptForm> => {
  // 返回FormGroup实例，而非普通对象
  return new FormGroup({
    code: new FormControl(
      {
        value: concept?.code || '',
        disabled: codeDisabled,
      },
      [Validators.required]
    ),
    display: new FormControl(concept?.display || ''),
    definition: new FormControl(concept?.definition || ''),
    // 递归创建的是FormGroup实例，符合FormArray的类型要求
    concept: new FormArray(
      concept?.concept?.map(nestedConcept => initCodeSystemConceptForm(nestedConcept)) || []
    ),
  });
};

关键修正点 #

1. 返回类型变更：初始化函数返回FormGroup<ICodeSystemConceptForm>，明确返回的是Angular表单组实例（属于AbstractControl子类）
2. 用FormGroup包裹字段：通过new FormGroup()创建表单组，确保每个递归项都是合法的表单控件
3. FormArray类型明确：接口中concept定义为FormArray<FormGroup<ICodeSystemConceptForm>>，指明数组元素是递归的表单组实例，满足类型约束

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