Angular FormGroup disabled parent with invalid childern

Question

In Angular when using Reactive Form, Form Group, and Child control are dynamically loaded.

Case where a parent control is Disabled and one of his children is invalid - makes the entire form invalid - even though the parent is disabled. I would expect that When a control is disabled and it contains child controls All child controls are disabled, and have status of DISABLED. So the Form validity will ignore the disabled parent and the Form will be Valid. this is not the case is reality.

please advise.

Please read stackoverflow.com/help/how-to-ask and modify your question to meet that standards outlined there. — jbrown
I have the situation in Angular 8 where the sub-controls of a reactive form group are disabled and yet the form group status is "invalid" "!$§$"§"!!! — Kieran Ryan

ramon22 ramon22 · Accepted Answer · 2018-03-01T02:10:55

Are the child controllers dynamically loaded and are you using it with Material then their is a bug they still have not fixed where child errors don't propagate to parent form with mat-error when submitting form.

In general If you are using reactive forms you can get hold of the parent form and add validation error to it, either by subscribing to the forms eventChange and testing it for child errors or by creating a ValidatorFn and adding the custom validator to the child controls and if an error occur they can set an error on their parent form

Example: child controller validation function:

 passwordVerifyTest(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const verifyPassword = control.value;
      if (verifyPassword === 'error') {
        control.parent.setErrors({'formInvalid': true});    
        return {passwordInavlid: true};
      }

      return null;
    };
  }

Angular FormGroup disabled parent with invalid childern

1 Answers