Angular/Typescript:如何正确初始化联合类型的FormControl

Question

我在初始化表单时遇到类型安全问题。我的问题如下：

我基本上有一个接口来描述一个TypedForm，它的属性应该接受Enum值或Enum的字符串值。

以下是枚举：

export enum MyEnum {
FIRST_VALUE= 'FIRST_VALUE',
SECOND_VALUE= 'SECOND_VALUE',
}

以下是接受枚举或字符串值的类型：

// similar to MyEnum | 'FIRST_VALUE' | 'SECOND_VALUE'
export type MyEnumKeyValues = MyEnum | keyof typeof StringEnum;

以及表单定义：

export type MyForm = FormGroup<{
enumProperty: FormControl<MyEnumKeyValues>
}>

问题是，当我使用FormBuilder初始化我的Form时，我传入的默认值总是抛出一个类型错误：

const myFormGroup: MyForm = this.formBuilder.group({
// TS2322 :  Type FormControl<MyEnum> is not assignable to FormControl<MyEnumKeyValues>
enumProperty: MyEnum.FIRST_VALUE,
// TS2322 :  Type FormControl<string> is not assignable to FormControl<MyEnumKeyValues>
enumProperty: 'FIRST_VALUE',
// Works but works with pretty much anything, that's not want we want here...
enumProperty: 42 as MyEnumKeyValues,
}); 

注意，这是有效的，但它很难看(我的现实生活对象要大得多，里面有几个枚举(：

const myFormGroup: MyForm = this.formBuilder.group({
enumProperty: new FormControl<MyEnumKeyValues>(MyEnum.FIRST_VALUE)
}); 

有没有更好/更优雅的方法来实现这一点？非常感谢。

Answer 1

这里的问题是FormControl中的泛型类型TValue在多个方法中用作函数参数。这使得泛型类型与试图将FormControl<MyEnum.FIRST_VALUE>分配给FormControl<MyEnumKeyValues>时导致错误的变量相反。

一个可能的解决方案是将myForm的类型更改为

export type MyForm = {
enumProperty: MyEnumKeyValues
}

并在构建这样的表单时使用它：

const myFormGroup = formBuilder.group<MyForm>({
enumProperty: MyEnum.FIRST_VALUE,
}); 

CCD_ 6将被类型检查为CCD_。

myFormGroup的类型自动推断为

const myFormGroup: FormGroup<{
enumProperty: FormControl<MyEnumKeyValues>;
}>

---

游乐场