I am working on a dynamic form that has the following shape:
FormArray
|->FormGroup
|->FormControl
When I want to validate my form on the client side I run the following function to update the validity of all elements.
function updateValueAndValidityForAllChildren(abstractControl: AbstractControl, emitEvent = true) {
if (abstractControl instanceof UntypedFormArray) {
const formArray = <UntypedFormArray>abstractControl;
_forEach(formArray.controls, (control) => {
updateValueAndValidityForAllChildren(control, emitEvent);
});
abstractControl.updateValueAndValidity({ onlySelf: true, emitEvent });
} else if (abstractControl instanceof UntypedFormGroup) {
const formGroup = <UntypedFormGroup>abstractControl;
_forEach(formGroup.controls, (control) => {
updateValueAndValidityForAllChildren(control, emitEvent);
});
abstractControl.updateValueAndValidity({ onlySelf: true, emitEvent });
} else if (abstractControl instanceof UntypedFormControl) {
abstractControl.updateValueAndValidity({ onlySelf: true, emitEvent });
}
}
This worked perfectly in Angular 16 but since we upgraded to 18 we have an odd bug that makes the FormArray to be valid when the FormGroup is invalid. In turn the form is valid when it should be invalid.
We have looked into the validators to make sure the values were correctly set and it looks OK.
Is this something that has been encountered before ? How to fix this ?