Why Angular Typed Forms Don’t Work as Expected

Angular has a very powerful feature called reactive forms. As powerful as this feature is, though, reactive forms have had one significant drawback for while—the lack of strict typing. Finally, this shortcoming was improved in Angular v14.

Let’s look at this in more detail to see how it helps to improve our development.

this.form = this.fb.group({
  username: ['', Validators.required],
  password: ['', Validators.required],
});

// Angular 14
this.form.value // value: any
this.form.value.username // username: any
this.form.value.firstName // No errors here

// Angular 15
this.form.value.username // username: string
this.form.value.firstName // Property 'firstName' does not exist

As shown in Angular 14, we don’t have any suggestions about the available properties because the value and its properties have a type any. Because of this, TypeScript will not throw any errors for non-existant properties.

After the update to Angular 15, TypeScript knows about form control types and can show us suggestions or throw an error if the property is not a part of the form.

Providing Form Type as a Generic

After the update, you can finally use generic-type with form classes. So, after ng update, all FormControl classes will be replaced with UntypedFormControl to avoid any breaks in existing code. Let’s check it on the user form.

// Before
form = new UntypedFormGroup({
  email: new UntypedFormControl(null),
  age: new UntypedFormControl(null)
});

// After
form = new FormGroup({
  email: new FormControl<string>(''),
  age: new FormControl<number|null>(null)
});

However, if you expect to put DTO directly for FormGroup or FormArray – it’s not quite so. Form generic expects any AbstractControl (for FormGroup) or array (for FormBuilder) for its properties.

interface IUser {
  email: string;
  age: number;
}

form = new FormGroup<IUser>({
  email: new FormControl(''),
  age: new FormControl(null)
});

In the case above, we will get a type error because the FormGroup generic expects an AbstartControl type for each property. TypeScript will throw an error: “Type string is not assignable to type AbstractControl.”.

The Solution

We can create a TypeScript utility type that will parse the interface properties and wrap each one with the correct FormControl type.

type ToFormGroup<T> = {
  [P in keyof T]: FormControl<T[P]>;
};

export type ToFormControl<T> = T extends Array<infer ArrayType> ? FormArray<ToFormControl<ArrayType>> : T extends object ? FormGroup<ToFormGroup<T>> : FormControl<T | null>

Let me explain what is happening in the code above. The ToFormGroup type gets our model and applies ToFormControl for each property. We’re checking if a property is an array at the very beginning. Getting the type of array using infer and returning FormArray as a recursive call of ToFormControl. If the value is not an array, TypeScript will check if T is an object, and if it is, it will return FormGroup as a recursive call of ToFormGroup with generic T (to go through all properties till the last nested one). And if it’s not – that means the property is primitive and FormControl should be returned.

Putting It All Together

Here’s what it might look like to put the new generic utility type to use in a real form:

interface IUser {
  firstName: string;
  lastName: string;
  email: string;
  age: number;
}

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserProfileComponent {
  form = new FormGroup<ToFormGroup<IUser>>({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: new FormControl(''),
    age: new FormControl(null)
  });
}

The code above will allow your IDE to help you with code suggestions and error detection. For example, if any property of IUser interface is added/removed, becomes non-required (question mark added to property), or has a type change, your build will fail because the form controls will not be valid any more.

Conclusion

The Angular team did a great job with reactive forms, and they’ve made them even more powerful since they were first introduced. No other framework has such a feature right out of the box. However, you can see that there is still room for improvement, which makes me excited to see what valuable improvements and features are added in the future.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.