I've been banging my head against a wall for the last couple of days and I don't know what I'm missing or what I'm doing wrong. Let me tell you, I have a complex Angular Reactive Form that has many custom child form components that implement ControlValueAccessor and provide NG_VALIDATORS. Child components have their own custom validation rules.
Everything seems to work fine except the fact that on page load, the child component itself knows that its status is invalid but the parent doesn't update his accordingly. Then when I start typing in some of the input fields, the validation status propagates from child to parent with no problem.
I have built a simplified demo so you can see what's going on, both fields are required but until you start typing something the parent component does not update its validation status.
https://stackblitz.com/edit/angular-ivy-nkr2be?file=src/app/complex-form.component.ts
Any help would be appreciated