Angular 14 -如何在FormBuilder中为嵌套的FormGroup定义类型

Question

this.form = this.formBuilder.group({
kWhControl: [false, []],
kWhValue: [0, []],
identified: this.formBuilder.group({
kWhControl: [false, []],
kWhValue: [0, []],
}),
)};

尝试了多种方法，但无法找到正确的方法。

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]>;
}

Answer 2

如果您使用FormBuilder生成表单，它接受对象泛型来定义类型。你必须传递所有的控件，像这样:

this.form = this.formBuilder.group<{
kWhControl: FormControl<boolean>,
...,
identified: FormGroup<{ 
kWhControl: FormControl<boolean>,
kWhValue: FormControl<number>,
}>,
}>(
...

你可以在这里做一些技巧，如果里面有重复的结构，像这样:

type KWhFormGroup = {
kWhControl: FormControl<boolean>;
kWhValue: FormControl<number>;
identified?: FormGroup<KWhFormGroup>;
}

然后:

this.form = this.formBuilder.group<KWhFormGroup>(
...

Answer 3

Thank you for the answer, 
Yeah I have tried that, but I was thinking of having a cleaned interface in place to define my form type and a generic FormGroupModel, anyway the below snippet helped me to do that, and now my form looks so clean and understandable, here is my implementation: 
interface VehicleBasedControlsForm {
kWhControl: boolean;
kWhValue: number;
identified: {
kWhControl: boolean;
kWhValue: number;
}
}
===Generic FormModel===
type FormGroupModel<T> = FormGroup<{
[K in keyof T]: T[K] extends object
? FormGroupModel<T[K]>
: ɵElement<T[K], null>;
}>;
Use it like FormGroupModel<VehicleBasedControlsForm>