How to trigger Form Validators in Angular2

FormsValidationAngular

Forms Problem Overview


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!

Forms Solutions


Solution 1 - Forms

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.

Hope this helps!

Validaton-Guide

FormControl Documentation

Solution 2 - Forms

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)

Solution 3 - Forms

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

Solution 4 - Forms

This did the trick for me

this.myForm.markAllAsTouched();

Solution 5 - Forms

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
  });
}

Solution 6 - Forms

You can trigger validation in this way:

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

Solution 7 - Forms

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);
        }
    };
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBonnevilleView Question on Stackoverflow
Solution 1 - FormsNightkingView Answer on Stackoverflow
Solution 2 - FormskernowcodeView Answer on Stackoverflow
Solution 3 - FormsMichika Iranga PereraView Answer on Stackoverflow
Solution 4 - FormsC.IkongoView Answer on Stackoverflow
Solution 5 - FormsjmreidyView Answer on Stackoverflow
Solution 6 - FormsCarlos CuestaView Answer on Stackoverflow
Solution 7 - FormspogiaronView Answer on Stackoverflow