Issue with the proper functionality of the this.formGroup.updateValueAndValidity() method in Angular 6

Question

Issue with the proper functionality of the this.formGroup.updateValueAndValidity() method in Angular 6

Currently, I am facing an issue where I need to add or remove validators in a formGroup's controls based on certain conditions. When I try to update the validators using `formGroup.updateValueAndValidity()` for the entire form, it does not seem to work as expected. However, if I individually apply the update for each control like `formGroup.get('formControl').updateValueAndValidity()`, it works fine but this approach doesn't seem ideal as I have to specify it for every control.


if (data == 'x') {
    this.myForm.get('control2').setValue(null);
    this.myForm.get('control2').setValidators(Validators.nullValidator);
    this.myForm.get('control1').setValidators(Validators.required);
} else if (data == 'y') {
    this.myForm.get('control1').setValue(null);
    this.myForm.get('control1').setValidators(Validators.nullValidator);
    this.myForm.get('control2').setValidators(Validators.required);
}
this.myForm.get('control1').updateValueAndValidity();
this.myForm.get('control2').updateValueAndValidity();

Although the above code snippet is functional, when I attempt to update all controls at once using

this.myForm.updateValueAndValidity();

it does not produce the desired result.

angular typescript form-control formgroups angular-validator

Answer 1

Answer №1

The updateValueAndValidity() method follows a bottom-up approach, meaning that when called on a control, it will only validate that specific control and its parent controls, not their children.

To understand how this method works in depth, you can refer to AbstractControl#updateValueAndValidity on GitHub.


updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
  this._setInitialStatus();
  this._updateValue();

  if (this.enabled) {
    this._cancelExistingSubscription();
    (this as{errors: ValidationErrors | null}).errors = this._runValidator();
    (this as{status: string}).status = this._calculateStatus();

    if (this.status === VALID || this.status === PENDING) {
      this._runAsyncValidator(opts.emitEvent);
    }
  }

  if (opts.emitEvent !== false) {
    (this.valueChanges as EventEmitter<any>).emit(this.value);
    (this.statusChanges as EventEmitter<string>).emit(this.status);
  }

  if (this._parent && !opts.onlySelf) {
    this._parent.updateValueAndValidity(opts);
  }
}

Answer 2

The updateValueAndValidity() method follows a bottom-up approach, meaning that when called on a control, it will only validate that specific control and its parent controls, not their children.

To understand how this method works in depth, you can refer to AbstractControl#updateValueAndValidity on GitHub.


updateValueAndValidity(opts: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
  this._setInitialStatus();
  this._updateValue();

  if (this.enabled) {
    this._cancelExistingSubscription();
    (this as{errors: ValidationErrors | null}).errors = this._runValidator();
    (this as{status: string}).status = this._calculateStatus();

    if (this.status === VALID || this.status === PENDING) {
      this._runAsyncValidator(opts.emitEvent);
    }
  }

  if (opts.emitEvent !== false) {
    (this.valueChanges as EventEmitter<any>).emit(this.value);
    (this.statusChanges as EventEmitter<string>).emit(this.status);
  }

  if (this._parent && !opts.onlySelf) {
    this._parent.updateValueAndValidity(opts);
  }
}

Answer 3

Answer №2

Last week, I stumbled upon a similar situation and after some investigation, I concluded that this behavior is to be expected. The documentation clearly states:

By default, it also updates the value and validity of its ancestors.

It's important to note that it mentions updating "ancestors" rather than "descendants". So, when you execute updateValueAndValidity() on both control1 and control2, if they are valid, then myForm will also be marked as valid.

Answer 4

Last week, I stumbled upon a similar situation and after some investigation, I concluded that this behavior is to be expected. The documentation clearly states:

By default, it also updates the value and validity of its ancestors.

It's important to note that it mentions updating "ancestors" rather than "descendants". So, when you execute updateValueAndValidity() on both control1 and control2, if they are valid, then myForm will also be marked as valid.

Answer 5

Answer №3

According to Serginho's explanation in the approved response, the issue lies in the fact that the updateValueAndValidity method works in a bottom-up manner and does not validate child controls. One potential remedy for this is creating a custom prototype method for the FormGroup class as shown below:

import { FormGroup, FormControl } from '@angular/forms';

declare module '@angular/forms/forms' {
  interface FormGroup {
    validate(): void;
  }
}

FormGroup.prototype.validate = function(this: FormGroup): void {
  for (const key in this.controls) {
    const formElement = this.get(key);
    if (formElement instanceof FormControl) {
      formElement.updateValueAndValidity();
    } else if (formElement instanceof FormGroup) {
      formElement.validate();
    }
  }
};

The validate method is recursive and triggers updateValueAndValidity for each leaf element (FormControl) within the tree structure of the form (FormGroup), including nested form groups.

Remember to import your module wherever you wish to utilize the validate method:

import '../core/extensions/formGroup';

Answer 6

According to Serginho's explanation in the approved response, the issue lies in the fact that the updateValueAndValidity method works in a bottom-up manner and does not validate child controls. One potential remedy for this is creating a custom prototype method for the FormGroup class as shown below:

import { FormGroup, FormControl } from '@angular/forms';

declare module '@angular/forms/forms' {
  interface FormGroup {
    validate(): void;
  }
}

FormGroup.prototype.validate = function(this: FormGroup): void {
  for (const key in this.controls) {
    const formElement = this.get(key);
    if (formElement instanceof FormControl) {
      formElement.updateValueAndValidity();
    } else if (formElement instanceof FormGroup) {
      formElement.validate();
    }
  }
};

The validate method is recursive and triggers updateValueAndValidity for each leaf element (FormControl) within the tree structure of the form (FormGroup), including nested form groups.

Remember to import your module wherever you wish to utilize the validate method:

import '../core/extensions/formGroup';

Answer 7

Answer №4

NOTICE: While this approach may not align with best practices, it accomplishes what Angular restricts me from doing easily. Please note that this method is less efficient compared to Angular's native validation handling. Below is a technique to update the entire form validation:

  validateForm(control: AbstractControl) {
    control['controls'].forEach(
      // make sure to pass {onlySelf: true, emitEvent: false} 
      // or it will recurse indefinitely
      control => control.updateValueAndValidity({onlySelf: true, emitEvent: false})
    );

    return null;
  }

In my scenario, I required the complete form validity to be refreshed every time the user modifies any field (not limited to the current field's validation or only touched fields):

this.form.setValidators(this.validateForm);

Answer 8

NOTICE: While this approach may not align with best practices, it accomplishes what Angular restricts me from doing easily. Please note that this method is less efficient compared to Angular's native validation handling. Below is a technique to update the entire form validation:

  validateForm(control: AbstractControl) {
    control['controls'].forEach(
      // make sure to pass {onlySelf: true, emitEvent: false} 
      // or it will recurse indefinitely
      control => control.updateValueAndValidity({onlySelf: true, emitEvent: false})
    );

    return null;
  }

In my scenario, I required the complete form validity to be refreshed every time the user modifies any field (not limited to the current field's validation or only touched fields):

this.form.setValidators(this.validateForm);

Answer 9

Answer №5

I found @ssnake's solution to be helpful, however it did not have support for FormArray. I made some modifications to make it more versatile and independent of specific classes. Now, it checks if there are controls and validates each one, whether it is a FormControl, FormGroup, or FormArray:

declare module '@angular/forms/forms' {
  interface AbstractControl {
    validate(): void;
  }
}

AbstractControl.prototype.validate = function(): void {
  this.updateValueAndValidity();

  if ('controls' in this) {
    for (const key in this.controls) {
      if (this.controls.hasOwnProperty(key)) {
        this.get(key).validate();
      }
    }
  }
};

Answer 10

I found @ssnake's solution to be helpful, however it did not have support for FormArray. I made some modifications to make it more versatile and independent of specific classes. Now, it checks if there are controls and validates each one, whether it is a FormControl, FormGroup, or FormArray:

declare module '@angular/forms/forms' {
  interface AbstractControl {
    validate(): void;
  }
}

AbstractControl.prototype.validate = function(): void {
  this.updateValueAndValidity();

  if ('controls' in this) {
    for (const key in this.controls) {
      if (this.controls.hasOwnProperty(key)) {
        this.get(key).validate();
      }
    }
  }
};

Answer 11

Answer №6

Give this a shot:

const formFields = [this.field1, this.field2, this.field3];

    for (let field of formFields) {
      for (let property in field.controls) {
        field.controls[property].updateValueAndValidity();
      }
    }

Answer 12

Give this a shot:

const formFields = [this.field1, this.field2, this.field3];

    for (let field of formFields) {
      for (let property in field.controls) {
        field.controls[property].updateValueAndValidity();
      }
    }

Answer 13

Answer №7

To ensure the validity of any FormControl, FormGroup, or FormArray, follow this method.

ValidateControl<T extends AbstractControl>(control: T): void {
  try {
    if (control instanceof FormGroup) {
      control.updateValueAndValidity()

      const controls = control.controls
      Object.keys(controls).forEach(key => {
        this.ValidateControl(controls[key])
      })
    }
    else if (control instanceof FormArray) {
      control.updateValueAndValidity()

      control.controls.forEach(formControl => {
        this.ValidateControl(formControl)
      })
    }
    else if (control instanceof FormControl) {
      control.updateValueAndValidity()
    }
    else {
      throw new Error('Error: unexpected control value')
    }
  } catch (error) {
    console.log(error)
  }
}

Answer 14

To ensure the validity of any FormControl, FormGroup, or FormArray, follow this method.

ValidateControl<T extends AbstractControl>(control: T): void {
  try {
    if (control instanceof FormGroup) {
      control.updateValueAndValidity()

      const controls = control.controls
      Object.keys(controls).forEach(key => {
        this.ValidateControl(controls[key])
      })
    }
    else if (control instanceof FormArray) {
      control.updateValueAndValidity()

      control.controls.forEach(formControl => {
        this.ValidateControl(formControl)
      })
    }
    else if (control instanceof FormControl) {
      control.updateValueAndValidity()
    }
    else {
      throw new Error('Error: unexpected control value')
    }
  } catch (error) {
    console.log(error)
  }
}

Issue with the proper functionality of the this.formGroup.updateValueAndValidity() method in Angular 6

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Instructions for opening a URL in a new tab using Angular

Form remains unchanged after manipulation in callback

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

Output Scalable Vector Graphics (SVG) content on a webpage

Utilize Tailwind CSS in React to dynamically highlight the active navigation item on click

Is there an issue with integrating Bootstrap with Angular 6?

Angular response object being iterated through in a loop

What is the reason behind the ineffectiveness of injection in abstraction?

What is the best way to accept user input in typescript?

When trying to run "ng s -o/ng s/ng build" commands in Angular Cli, there is an issue where no output is displayed

Deactivating a Component in Ionic Angular

When using Typescript type aliases, make sure to let Intellisense display the alias name instead of the source

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

Angular 10: Issue encountered while trying to instantiate an Object of an Object

What steps can I take to ensure that Visual Studio replaces my JavaScript file during the TypeScript build process?

Mastering the Art of Adding Headers in Angular

Enhance your React Highchart by incorporating gradient shading to the data points

Date selection feature in Material UI causing application malfunction when using defaultValue attribute with Typescript

The compiler option 'esnext.array' does not provide support for utilizing the Array.prototype.flat() method

Error! Unexpected closure occurred while creating an Angular CLI project with npm