Problem with nested ControlValueAccessor and Validation

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

In Reactive Forms, if you have two or more nested custom form components that implement ControlValueAccessor and Validator, the outer one doesn’t update its validation status until you make a change in the inner component.

It seems the validation runs initially only once from the outer component to the inner one, so if the inner component initially is invalid the outer doesn’t know anything until the next validation cycle.

In the example provided, initially “user-data” is invalid, so “complex-form” should be also invalid, but as you can see it updates its status once you start typing in the input fields.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-nkr2be?file=src/app/complex-form.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular 12.0.5

Anything else?

No response

[St1c]

is there any update on this? I don’t think reusable formGroup is a valid solution here. It should be possible to have multiple levels of CVAs without any fancy logic behind it. And currently it works for all scenarios - except one - initialisation of all formControls. So update from bottom to top works - when user updates controls, everything bubbles up to the parent form. But if the child is invalid at the form creation, this calls validate() methods from top to bottom, and it doesn’t update the parent components properly.

[lorpmtp]

On both stackblitz above, it seems that calling updateValueAndValidity in the CVA hierarchy’s deepest component’s ngAfterViewInit lifecycle could be a temporary alternative.