Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to trigger Form Validators in Angular2

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!

like image 237
Bonneville Avatar asked Aug 27 '15 21:08

Bonneville


People also ask

How do I add custom validators dynamically in reactive form?

We can add Validators dynamically using the SetValidators or SetAsyncValidators. This method is available to FormControl, FormGroup & FormArray. There are many use cases where it is required to add/remove validators dynamically to a FormControl or FormGroup.

Is it possible to define validators in FormBuilder?

FormBuilder allows us to explicitly declare forms in our components. This allows us to also explicitly list each form control's validators.


1 Answers

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

like image 55
Nightking Avatar answered Sep 19 '22 04:09

Nightking