Using a shared FormComponent more than twice throws `ExpressionChangedAfterItHasBeenCheckedError`

⭐’ed it 😄

Description We have a general component (lets call it FormComponent) which implements a form with a formly-form. This component is used to add some HostListeners. Back in the days we had to add FormlyFormBuilder.buildForm to the ngOnInit of that component to prevent getting the ExpressionChangedAfterItHasBeenCheckedError exception (removing this seems not to resolve the new issue and it also brings this previous scenario back).

We have avoided updating this dependency since we got the same exception after the release of v5.10.27. It happens when we add our FormComponent more than 2 times in the same template, using the same form but different fields at least once.

It’s been a while and I wanted to keep this dependency up to date as well, so I tried updating it again to the latest version. Unfortunately we still got the same exception.

Minimal Reproduction Can be found at: https://github.com/sjoulbak/formly-bug-multi-form

Run yarn run test to see the exception.

Your Environment

• Angular version: 14.1.0
• Formly version: 5.12.6

[aitboudad]

Do you have another suggestion?

will check!

[aitboudad]

I see, so the root issue is passing the same form instance to multi-component causes an update in the form state during the same cycle:

• first render: form state updated to valid
• second render: form state updated to invalid

What I’d suggest is if possible to use multi formly-field instead, to have an idea check the following example https://formly.dev/docs/examples/advanced/tabs/