代码之家 › 专栏 › 技术社区 › Omtechguy

使用组件的重用结构创建FormGroup

typescript angular

Omtechguy · 技术社区 · 6 年前

我需要创建一些具有相同定义的表单组。因此,我创建了一个具有以下结构的常量:

export const predefinedFormGroup = {
  'field1': new FormControl(null, [Validators.required]),
  'field2': new FormControl(null, [Validators.required]),
  'field3': new FormControl(null, [Validators.required]),
  'field4': new FormControl(null)
};

我需要将其作为一个对象,因为我不仅使用它来创建formgroup,还为了其他目的在字段上进行了一些迭代。

然后,我使用以下方法创建FormGroup:

this.form = new FormGroup(predefinedFormGroup)

这是可行的,但有一个大问题:

在字段上使用类型信息时,成本会发生变化,因为TypeScript通过引用传递预定义的FormGroup,所以下次使用保存行时 this.form = new FormGroup(predefinedFormGroup) 若要创建具有相同结构的另一个formGroup,该表单会被第一个formGroup中填充的值弄脏。

我知道我可以使用表单。reset()清除值,但我确信有更好的方法通过val将结构传递给FormGroup。

有人能帮忙吗?

1 回复 | 直到 6 年前

Mixalloff 6 年前

您可以创建工厂函数而不是变量

export const predefinedFormGroupFactory = () => ({
    field1: new FormControl(null, [...]),
    field2: new FormControl(null, [...])
})

然后像这样使用它

const predefinedGroup = predefinedFormGroupFactory();
this.form = new FormGroup(predefinedGroup);

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前

Devmix · 如何在new Map()中保存状态?

1 年前

programmerGuy · 使用useState时获取不可分配给参数的接口

1 年前

Luisus · 从Prisma 5客户端提取类型

1 年前

Rostys · TypeScript:使用类型转换进行类型保护

1 年前

Raffaele · TS2304:当types.d.ts导出某些内容时,找不到名称ENDPOINT

1 年前

Anne · 类型不一致的对象的TypeScript类型定义

1 年前

tuimui · 使用react+ts通过道具传递数据

1 年前

FJ97 · 错误NullInjectorError:R3InjectorError(AppModule)[MatDialogConfig->MatDialogConfig]:

1 年前

Pooria Sadeghy · Vitest-类型错误:_ctx$t不是函数

1 年前