How to trigger Form Validators in Angular2

Question

In angular2 I want to trigger Validators for some controls when a another control is changed. Is there some way that I can just tell the form to re-validate? Better still, can I request validation of specific fields?

Example: Given Checkbox X and input P. Input P has a validator that behaves differently based on the model value of X. When X is checked/unchecked I need to invoke the validator on P. The Validator on P will look at the model to determine the state of X and will validate P accordingly.

Here's some code:

constructor(builder: FormBuilder) {
    this.formData = { num: '', checkbox: false };

    this.formGp = builder.group({
        numberFld: [this.formData.num, myValidators.numericRange],
        checkboxFld: [this.formData.checkbox],
    });
}

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
        // I want to be able to do something like the following line:
        this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']);
    }
});

Anybody have a solution? Thanks!

Are you just trying to enable/disable the validation based on the value of X? What sort of validators are you using? You can cause validators to execute based on a condition in your scope, but I'm not sure if that approach will work for you. See: stackoverflow.com/questions/21370006/… — steve v
– steve v, Commented Aug 27, 2015 at 22:06
@Bonneville could you please explain how you are passing the checkbox state to the validator function? — Varun Mulloli
– Varun Mulloli, Commented Mar 7, 2016 at 7:43

starball · Accepted Answer · 2022-12-24 03:07:07Z

110

I don't know if you are still looking for an answer, so here is my suggestions:

Have a look at this: Angular 2 - AbstractControl

I think what you could do is following:

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
       this.formGp.controls['numberFld'].updateValueAndValidity();
    }
});

This should trigger and run the validators. Furthermore the state gets updated as well. Now you should be able to consult the checkbox value within your validator logic.

Validaton-Guide

FormControl Documentation

edited Dec 24, 2022 at 3:07

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

answered Oct 27, 2015 at 19:55

Nightking

2,3051 gold badge22 silver badges24 bronze badges

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

8 Comments

Bonneville Over a year ago

Thanks @Nightking for the suggestion, I'll try it out. Note that your link isn't working.

Nightking Over a year ago

@Bonneville Thanks for the information. They extracted the form code to the common namespace. Things changing a bit to fast :). I've updated the link to the source.

Bonneville Over a year ago

I finally got around to using this piece of code and it seems to be working for me. Thanks! BTW, there is a typo in your code: the letter 'e' is missing in the updateValueAndValidity() function. Your code has updat instead of update. Cheers, this was a big help!

Explosion Pills Over a year ago

Link is broken; may be updated to github.com/angular/angular/blob/master/packages/forms/src/… although not quite the same. Could also link to Angular docs

pravin Over a year ago

Life saver!! The use case that I was stuck was when the user submits a form without touching a single form control. The form is invalid but the controls where not showing any error message

|

Jay Byford-Rew · Accepted Answer · 2016-03-15 13:17:33Z

62

with my ControlGroup I do this because I have errors divs checking if touched

for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}

(this.form is my ControlGroup)

answered Mar 15, 2016 at 13:17

Jay Byford-Rew

6,0641 gold badge38 silver badges37 bronze badges

1 Comment

chris_r Over a year ago

this is actually the right answer. If you want single input this.form.controls['name'].markAsTouched();

C.Ikongo · Accepted Answer · 2019-09-14 01:02:36Z

34

This did the trick for me

this.myForm.markAllAsTouched();

answered Sep 14, 2019 at 1:02

C.Ikongo

1,8561 gold badge21 silver badges15 bronze badges

2 Comments

stevec Over a year ago

The problem with marking as touched is that if you are tracking changes, like to tell them there are unsaved changes upon leaving, then this will trigger that logic

Hossein Ganjyar Over a year ago

@stevec I didn't have understand your comment! Could you leave a demo here?! I'm using of markAllAsTouched method, whereas I updateValueAndValidity method didn't work for me to re-validate my inputs!

Michika Iranga Perera · Accepted Answer · 2018-11-02 16:44:45Z

33

With the help of this blog

blog link

I have came across a solution with the combine of Nightking answer

Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});

this.orderForm is the form group

answered Nov 2, 2018 at 16:44

Michika Iranga Perera

1,68615 silver badges8 bronze badges

Comments

jmreidy · Accepted Answer · 2016-06-01 20:28:11Z

There are more elegant ways of modeling this behavior - for example, putting your state into a ReplaySubject and observing that, and then using async validators observing the state - but the pseudo-coded approach below should work. You simply observe the value changes in the checkbox, update the model as appropriate, then force a re-validation of the numberFld with the updateValueAndValidity cal.

constructor(builder: FormBuilder) {
  this.formData = { num: '', checkbox: false };
  const numberFld = builder.control(this.formData.num, myValidators.numericRange);

  const checkbox = builder.control(this.formData.checkbox);
  checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
    this.formData.checked = bool;
    numberFld.updateValueAndValidity(); //triggers numberFld validation
  });

  this.formGp = builder.group({
      numberFld: numberFld,
      checkboxFld: checkbox
  });
}

Carlos Cuesta · Accepted Answer · 2021-05-19 18:05:08Z

5

You can trigger validation in this way:

this.myform.get('myfield').updateValueAndValidity();

edited May 19, 2021 at 18:05

answered May 18, 2021 at 17:34

Carlos Cuesta

1,5041 gold badge21 silver badges22 bronze badges

Comments

Gabriel Guerrero · Accepted Answer · 2022-09-05 09:07:59Z

2

Here is another similar way that also uses markAsDirty and updateValueAndValidity, particularly good if you use angular material where markAsTouched is not enough.

export function forceValidation(form: AbstractControl) {
  if (form instanceof FormGroup || form instanceof FormArray) {
    for (const inner in form.controls) {
      const control = form.get(inner);
      control && forceValidation(control);
    }
  } else {
    form.markAsDirty();
    form.markAsTouched();
    form.updateValueAndValidity();
  }
}

answered Sep 5, 2022 at 9:07

Gabriel Guerrero

5164 silver badges7 bronze badges

Comments

pogiaron · Accepted Answer · 2018-10-05 14:40:04Z

0

static minMaxRange(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (Validators.min(min)(control)) { // if min not valid
            return Validators.min(min)(control);
        } else {
            return Validators.max(max)(control);
        }
    };
}

answered Oct 5, 2018 at 14:40

pogiaron

3523 silver badges5 bronze badges

Comments

Arsen Khachaturyan · Accepted Answer · 2023-09-13 15:25:08Z

0

To achieve this, we need to call the markAsTouched() method over FormControl.
But what if the control itself is actually FormGroup?

Here is the code handling all possible nestings:

triggerFormValidation(formGroup: any = this.myCreateForm): void {
    for (const key in formGroup.controls) {
        const control = formGroup.controls[key];

        if (!control.controls) { // FormControl case
            control.markAsTouched(); // trigger changes check
        } else { 
            this.triggerFormValidation(control); // FormGroup case
        }
    }
}

answered Sep 13, 2023 at 15:25

Arsen Khachaturyan

8,4304 gold badges46 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to trigger Form Validators in Angular2

9 Answers 9

8 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

8 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related