typescript 如何将ngx-typesafe-forms迁移到Angular 14+类型表单

iyfjxgzm 于 2023-02-14 发布在 TypeScript

关注(0)|答案(1)|浏览(139)

从版本14开始，Angular提供了Typed Forms，允许指定表单的类型。
在版本14之前没有这样的特性，我一直使用ngx-typesafe-forms来输入表单。
现在我需要将所有表单从这个外部库迁移到集成的Angular的类型化表单，但是，出现了一个问题。
例如，假设我的类型是：

interface MyType {
    field1: string;
    field2: number;
}

使用ngx-typesafe-form，我可以创建如下FormGroup：

const form = new FormGroup<MyType>({
    field1: new FormControl(''),
    field2: new FormControl(0),
});

上面的代码不适用于Angular的类型化表单，因为它们实际上希望用FormControl来指定类型：

interface MyType {
    field1: FormControl<string>;
    field2: FormControl<number>;
}

typescript

来源：https://stackoverflow.com/questions/75409613/how-to-migrate-ngx-typesafe-forms-to-angular-14-typed-forms

1条答案

按热度按时间

zz2j4svz1#

我创建了一个新的FormGroup类，可以使用它来简化此迁移，它依赖于Angular的本机类型表单，并且应该直接替换来自ngx-typesafe-forms的表单。
如果您有简单的表单，迁移就很容易：

export type ModelForm<T> = {
  [K in keyof T]: FormControl<T[K]>;
};

export class TypedFormGroup<T> extends FormGroup<ModelForm<T>> {}

那么TypedFormGroup可以从index.ts文件导出为FormGroup，然后只需将ngx-typesafe-forms FormGroup的import替换为新的import。
但是，如果您有嵌套的窗体组和窗体数组，事情就会变得更加复杂。
使用嵌套表单组仍然很容易，我所要做的就是使用递归进一步编辑我的ModelForm类型：

export type ModelForm<T> = {
  [K in keyof T]: FormControl<T[K]> | FormGroup<ModelForm<T[K]>>;
};

但是，当我还必须支持表单数组时，事情变得更加棘手，最终代码如下：

type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;

export class TypedFormArray<T> extends FormArray<FormControl<T> | TypedFormGroup<T>> {}

export type ModelForm<T> = {
  [K in keyof T]: T[K] extends Array<any>
    ? TypedFormArray<Flatten<T[K]>> | FormControl<T[K]>
    : FormControl<T[K]> | FormGroup<ModelForm<T[K]>>;
};

export class TypedFormGroup<T> extends FormGroup<ModelForm<T>> {}

在我的index.ts中，我必须导出新的FormGroup和新的FormArray来代替ngx-typesafe-form的：

export { TypedFormGroup as FormGroup, TypedFormArray as FormArray } from './migration-forms';

赞(0）回复(0）举报 2023-02-14

我来回答

typescript 如何将ngx-typesafe-forms迁移到Angular 14+类型表单

1条答案

相关问题

热门标签

最新问答