bug(mat-form-field): Forced reflow warning for each mat-form-field in dev tools.

[Siddhu-K]

Description

I have a form with multiple rows of mat-form-fields, when I get the data from the server to edit, it takes around 5 seconds to load the mat form fields (100+ form fields).

I checked the peformance tab in the devtools and found that the forced reflow warning for each of the mat-form-field.

the problem doesn't exist when adding multiple

Reproduction

Steps to reproduce:

1. add multiple mat-form-fields
2. check peformance tab, there is Recalculate style for each of the mat-form-fields.

Expected Behavior

avoid recalculate style in mat-form-fields.

Actual Behavior

recalculate style for each of the mat-form-field

Environment

Angular CLI: 15.2.4
Node: 16.14.0
Package Manager: npm 8.18.0
OS: win32 x64

Angular: 15.2.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package Version

@angular-devkit/architect 0.1502.4
@angular-devkit/build-angular 15.2.4
@angular-devkit/core 15.2.4
@angular-devkit/schematics 15.2.4
@schematics/angular 15.2.4
rxjs 7.8.0
typescript 4.8.4

[crisbeto]

This has the same root cause as #14336 which has a pending fix.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}