I'm trying to make a complex nested form generated dynamically but I can't get it to work.
The result would be something similar to this: Mock of desired result
The user has to select a file, which type of file it is, a description and fulfill the required metadata. After that he will be able to submit the file.
The problem is that when I generate the form dynamically I get: "Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'."
I'm trying to force change detection on the part where I build the form, like this:
this.metadataForm = this.docMetService.toFormGroup(this.metadataDefinitions);
this.changesDetector.markForCheck();
But the error still happens.
Any help? Thank you in advance
Let me guess. Your accessing the valid property of a control somewhere , which is initially valid because you haven't probably loaded your form parts that would change the validity.
"Expression has changed after it was checked" means something has outside of angular's eyes.
For this to fix , try removing that validity check from your template and then test to see everything is fine.
Then , just to test , put the main method that creates all your dynamic form blocks inside a setTimeout ( which helps angular to re run the cd) and at the end run a cd.detectChanges.