I have a complex set of objects that I need to edit. Basically, I have several objects at the top level, which may or may not be enabled, and each one has some complex sub-objects. The whole set of objects need to be saved together at once. To do this I created a form, and each object is considered a "section" that implements a custom form control. That way from the parent component can deal with the application state and I could set up a reactive form with everything typed out, etc.
Each of the child components will implement ControlValueAccessor and Validator interfaces. These components use an inner "form" (FormGroup) to track their state. When writeValue is called I use setForm and pass { emitEventand: false } to not trigger the valueChanges observable that will invoke the onChanged "event". After wiring up the NG_VALUE_ACCESSOR and NG_VALIDATORS I am getting the values to flow from the parent form to the child forms.
The issue I'm running into is that when I'm trying to enable/disable components based on other components values. In simpler forms I would wire up a valueChanges subscription and then call enable/disable on the appropriate FormControl. When I'm doing it in this nested fashion it doesn't seem to pick that value up until I've toggled the checkbox once. Matter of fact, once I add in the NG_VALUE_ACCESSOR provider it seems to do this.
What am I doing wrong?
Here's a stackblitz example showing the exact issue: https://stackblitz.com/edit/v96wamwy-crtxjtvz?file=src%2Fapp%2Finner-form%2Finner-form.component.ts
