Angular updateValueAndValidity() doesn't work

Question

I have simple form:

<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
  <input type="radio" id="enabled" formControlName="enabled"
    [value]="true" [checked]="form.controls.enabled.value == true"
    (click)="setValidators()">
  <label for="enabled">Enable</label>

  <input type="radio" id="disabled" formControlName="enabled"
    [value]="false" [checked]="form.controls.enabled.value == false"
    (click)="clearValidators()">
  <label for="disabled">Disable</label>

  <input type="text" class="form-control" id="text" formControlName="text">
  <button type="submit" 
    [disabled]="!form.valid">Save Changes</button>
</form>

and Angular component code:

ngOnInit() {
  this.buildForm();
}

buildForm() {
  this.form = this.formBuilder.group({
    text: [''],
    enabled: [false]
  });
}

clearValidators() {
  this.form.get("text").clearValidators();
  this.form.updateValueAndValidity();
}
    
setValidators() {
  this.form.get("text").setValidators([Validators.required]);
  this.form.updateValueAndValidity();
}

When I load page I have enabled = false and text='', but when I click on "Enable" radio button I expect setting validator on text field but text='' and form should be invalid and submit button will be disabled. But when I output in browser console form.valid value = true and I expect false.

What did I do wrong? How can I resolve this issue?

Does this answer your question? What is updateValueAndValidity See especially this answer: "Note: it doesn't go down the tree, only up." — Heretic Monkey
– Heretic Monkey, Commented Oct 5, 2023 at 13:15

Felix · Accepted Answer · 2023-10-05 12:53:53Z

1

I think updateValueAndValidity does not propagate to the child elements. You have to call it on the form control as well:

this.form.get("text").updateValueAndValidity()

answered Oct 5, 2023 at 12:53

Felix

1,59612 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular updateValueAndValidity() doesn't work

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related