Question

我有以下通用类型来配置取自 The Best Way to build reactive sub-forms with Angular 的响应式表单：

export type FormGroupConfig<T> = {
    [P in keyof T]: [
            T[P] | { value: T[P]; disabled: boolean },
        (AbstractControlOptions | ValidatorFn | ValidatorFn[])?,
    ]
}

因此，该类型采用 Typescript 模型并强制将属性/键作为表单控件的名称。它适用于非嵌套模型类型（单个 FormGroup），例如在下面的 IAddress 类型中...

IAddress { 
 street: string 
 zip: string
}

但是，它会因嵌套类型而失败（带有嵌套 FormGroup 的 FormGroup）

type Nok {
   relation: string
   address: IAddress
}

在上面，IAddress 将表示反应形式的嵌套 FormGroup

如何向 FormGroupConfig 添加递归以允许考虑嵌套？

尝试了一些变体，但目前有效。

编辑 1：

当将返回的 FormGroup 分配给嵌套属性时，解决方案会中断，如下所示：

const config: FormGroupConfig<Nok> = {
    relation:['', []]
    address: this.addressForm.createGroup()
}

似乎对 address 属性的分配需要做一些进一步的工作。

Answer 1

也许这个泛型可能有用

type NewType<T> = [
            T | { value: T; disabled: boolean },
        (AbstractControlOptions | ValidatorFn | ValidatorFn[])?,
    ]

export type FormGroupConfig<T> = {
    [P in keyof T]: 
       T[P] extends object
            ? FormGroupConfig<T[P]>
            : NewType<T[P]>;

}

Playground

递归打字稿类型和反应形式

1 个答案: