Angular：在 AbstractControls 和类之间对齐类型

Question

我尝试过，但无法弄清楚如何定义和对齐类型。例如，

export interface IDumpingFormSchema {
  requestNumber: string | null;
  employeeId: string | null;
  employeeName: string | null;
  department: string | null;
  companyCode: string | null;
  brand: string | null;
  lineItems: DumpingFormItem[] | null;
}

在我的课堂上，我可以通过实现

IDumpingFormSchema

来确保属性实现：

export class DumpingFormData implements IDumpingFormSchema {}

但是，就 FormControl、FormArray 和 FormGroup 而言，我想确保属性已定义并对齐。现在，我手动定义了类型，

// should follow the schema's properties
export type IDumpingFormGroup = {
  requestNumber: FormControl<string | null>;
  employeeId: FormControl<string | null>;
  employeeName: FormControl<string | null>;
  department: FormControl<string | null>;
  companyCode: FormControl<string | null>;
  brand: FormControl<string | null>;
  lineItems: FormArray<FormControl<DumpingFormItem | null>>;
}

在服务中，我可以实现并确保返回的 FormGroup 与

IDumpingDroup

保持一致。

  createDumpingApplicationFormGroup(): FormGroup<IDumpingFormGroup> {
    return this.fb.group({
      requestNumber: this.fb.control<string | null>(null),
      employeeId: this.fb.control<string | null>(null),
      employeeName: this.fb.control<string | null>(null),
      department: this.fb.control<string | null>(null),
      companyCode: this.fb.control<string | null>(null),
      brand: this.fb.control<string | null>(null),
      lineItems: this.fb.array([] as FormControl<DumpingFormItem | null>[]),
    });
  }

如何动态使用

IDumpingFormSchema

并生成

IDumpingFormGroup

类型？有没有办法做到这一点，例如DTO或DAO？谢谢。

Answer 1

您可以创建几个实用程序类型来帮助您动态派生类型化的 FormGroup。

首先，我们可以使用Conditional Type来表达通用的ControlType，它将表示FormArray或FormControl，具体取决于类型是否扩展Array。

type ControlType<T> = T extends Array<infer U>
  ? FormArray<FormControl<U | null>>
  : FormControl<T>;

然后，我们可以使用Mapped Type来声明一个通用的FormGroupType，将该类型应用于界面的所有属性：

type FormGroupType<T> = {
  [K in keyof T]: ControlType<T[K]>;
};

现在，您可以像这样使用它来动态声明您的表单组类型：

type IDumpingFormGroup = FormGroupType<IDumpingFormSchema>;