We present a TypeScript utility for Angular forms that maintains strong typing and consistency with data interfaces in full stack TypeScript projects. The idea is to leverage a single set of interfaces as the basis for database models, services, DTOs, and UI components, and generate typed form controls that reflect those interfaces.
Overview of the GForm type and expected behavior: export type GForm<IInterface> = FormGroup<{ [Key in keyof IInterface]: IInterface[Key] extends Array<infer ArrayItem> ? FormArray<GForm<ArrayItem>> | FormControl<ArrayItem[]> : IInterface[Key] extends Date ? FormControl<Date | null> : IInterface[Key] extends object ? GForm<IInterface[Key]> | null | FormControl<IInterface[Key] | null> : FormControl<IInterface[Key] | null> }> This type maps each property of the interface to a FormControl, FormGroup, or FormArray as appropriate, supporting arrays, dates, nested objects, and null values that may appear after resetting the form.
Simplified usage example: export interface ICar { brand: string, model: string } const formCar: GForm<ICar> = new FormGroup({ brand: new FormControl<string>('', [Validators.required, Validators.minLength(2)]), model: new FormControl<string>('', [Validators.required, Validators.minLength(2)]) }); export interface IDrivingLicence { fullname: string; car: ICar } const formLicence = new FormGroup({ fullname: new FormControl<string>(''), car: new FormControl<ICar>(defaultCar, { nonNullable: true }) }) as GForm<IDrivingLicence>
Frequently asked question about the existence of official utilities: Angular has been improving the typing of reactive forms in recent versions and offers generics in FormControl and FormGroup. However, there is no official built-in utility that automatically converts an arbitrary interface into a complete FormGroup structure with special rules for arrays, dates, and nested objects as described here. There are libraries and community solutions that address form typing and mapping, and it is common to implement custom utilities to cover very specific cases of each domain.
Suggestions to improve the utility: implement a recursive function that builds the FormGroup from the interface and its default values; handle optional keys by separating required from optional properties; add explicit support for arrays of primitive types and arrays of objects; use TypeScript utilities like NonNullable and Exclude to refine nullability; leverage FormBuilder with typed signatures to simplify control creation; and add tests that validate conversions in complex cases such as union types and recursive types.
Important notes: The null type is included because controls can become null after reset; validators can be used to reject nulls when appropriate; FormControl<T | null> is useful when managing a complex object via a custom control instead of a nested FormGroup; review Angular versions to take advantage of typing improvements in reactive forms.
About Q2BSTUDIO: Q2BSTUDIO is a custom software and application development company specialized in enterprise solutions. We offer custom software, custom application development, artificial intelligence consulting, implementation of AI agents for businesses, cybersecurity services, AWS and Azure cloud services, and business intelligence projects with Power BI. We design comprehensive solutions that combine cloud architecture, advanced analytics, and AI automation to solve specific business challenges.
If you are looking to improve code quality and the security of your Angular forms or need to develop a platform with artificial intelligence integration and cloud services, at Q2BSTUDIO we can help you with custom software services, custom applications, artificial intelligence models, managed cybersecurity, AWS and Azure cloud services, business intelligence, AI for businesses, AI agents, and Power BI. Contact us for a consultation and a proof of concept tailored to your needs.
If you want us to review your snippet and propose an extended version that covers more specific cases, I can help you turn that utility into a typed form factory, add handling of optional properties, and propose patterns for integration with asynchronous validators and backend services.
