Angular - Slow form rendering with hundred of fields

Question

I'm working with Angular 13, and I've build a form for a CMS with over a hundred of fields.

I've used standard reactive forms, and I have

• Nested formGroups
• Fields / Groups visibility depending on other fields
• FormArrays with FromGroups that can be added / removed dinamically

To made the form more usable, it's graphically divided in sections using mat-tabs with lazy loading.

Because the form fields can change often, the FormGroup is build at runtime using a JSON that defines

• Field type
• Field requirements (like 'minLength', 'maxValue', 'steps', ...)
• Dependencies from other fields for visibility

What I've noticed is that when opening the page, even removing the HTML part, the main formGroup is ready after 3/4 seconds, and if there is data it takes event more.

Unfortunately the code is proprietary and pretty big, and I can't reproduce it here. What I'm asking is good pratice on how to manage this much fields in Angular or ideas on how debug / optimize the code.

Thank you.

Answer 1

• On push change detection, might give it a boost
• Try to do memory profiling and check where the most memory is occupied, cloneDeep or any clones of objects tend to slow down the application
• Try to do console.log(new Date()) over the code and check which suspected line take so much time

These are just a few suggestions, hope one of them helps you!