0

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 ?

1
  • providing some reproducible example would increase chances of getting help Commented Oct 22, 2024 at 16:04

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.