Angular 13 Application Slow Rendering with Large Forms and Dynamic Validations
I'm maintaining legacy code that Quick question that's been bugging me - I'm working through a tutorial and I'm experiencing important performance optimization with my Angular 13 application that has a form containing over 100 fields, many of which have dynamic validations based on user input. When the form is loaded, it takes a noticeable amount of time to render, and interactions with the form, like typing or clicking, feel sluggish. I've tried using `ChangeDetectionStrategy.OnPush` on my components to optimize the rendering, but the performance has only slightly improved. Here's a simplified version of my form component: ```typescript import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-large-form', templateUrl: './large-form.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class LargeFormComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ field1: ['', Validators.required], field2: ['', Validators.required], // ...additional fields... }); } } ``` The template includes many nested components for each field, which might be contributing to the rendering time. When I profile the app using Chrome DevTools, I can see a lot of time spent in the rendering phase, but I'm not sure how to identify the bottlenecks further. Additionally, I noticed that when I add a field with a complex validation logic, the performance degrades even more. For example, when a user types in a field, the validations for other fields seem to trigger unnecessarily. I've considered using `ngZone.runOutsideAngular`, but I'm concerned I might introduce bugs with the reactive form's state updates. Has anyone faced similar issues with large forms in Angular, and what strategies can I use to improve performance without sacrificing the form's functionality? Has anyone else encountered this? Is there a better approach? For context: I'm using Typescript on Windows 10. Thanks in advance!