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

What is the best way to convert the text on a button into another language?

Creating a dynamic image binding feature in Angular 8

Implementation of setProperties method on LineLayer in MapBox encounters resolution issues

I'm having trouble retrieving my variable within the socketcluster's socket.on function

Issue TS2339: The object does not have a property named 'includes'

TypeScript failing to correctly deduce the interface from the property

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Sending JSON data from Angular to WCF

Issues with data binding in Angular2 are arising specifically in IE11

Angular and RxJS can be set up to delay the next call from BehaviorSubject in situations where there are multiple

Bidirectional data binding in angular 12 reactive forms

Discovering the name of an object property by locating its corresponding id

Having difficulty sending a message from an AngularJS application to an Angular 10 application through an iframe

Is there a method to ensure the strong typing of sagas for dispatching actions?

Iterating over an object and inserting values into a JavaScript object using the ascending count as the identifier

Disabling the scrollbar within angular elements

Converting types to "any" and encountering the error message "There are two distinct types with the same name, but they are not related."

Validating the absence of a value in Angular 2: How to confirm if an object is

Exploring the Power of PrimeNG and Observables in Angular 4 with RxJS

What led the Typescript Team to decide against making === the default option?