【问题标题】:Recursive Typescript Types and Reactive Form递归打字稿类型和反应形式
【发布时间】:2021-06-30 03:25:44
【问题描述】:

我有以下通用类型用于配置从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()
}

似乎对地址属性的分配需要进一步的工作。

【问题讨论】:

  • 仅供参考,它已经存在。您可以尝试谷歌“键入反应形式的角度”。我现在不记得库名了。

标签: angular typescript typescript-generics


【解决方案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

【讨论】:

  • 请参阅上述问题中的 EDIT 1(页面底部)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-10
  • 1970-01-01
  • 2020-09-10
  • 2018-03-27
  • 2017-06-24
  • 2021-08-05
相关资源
最近更新 更多