I have a mastercomponent - subcomponent arrangement in Angular with reactive forms.
With the use of ControlValueAccessor the subcomponent's value is "propagated" from the subcomponent's formGroup to the master component's formGroup.
This is the subcomponent's formGroup:
public formGroup = this.formBuilder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
});
This is the mastercomponent's formGroup:
public readonly masterFormGroup = this.formBuilder.group({
nameInput: [],
});
This is the mastercomponent's template:
<div [formGroup]="masterFormGroup">
<name-input
formControlName="nameInput"
></name-input>
</div>
But the validation status is not propagated. The master component's status is VALID when the subcomponent's status us INVALID!
How can I get the real status in the master component?
The whole thing is on StackBlitz: https://stackblitz.com/edit/angular-ivy-f7fy5b?file=src/app/app.component.ts