Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

388
Views
Angular 2 FormGroup Add Validators dynamic

i'm tring to add validator to FormContol dynamic (not on initialization) and it's not work....

the code:

this.formGroup.controls["firstName"].validator = Validators.Required;

Did anyone do it?

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Try this, it should work

this.formGroup.controls["firstName"].setValidators(Validators.required);

For multiple validators

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);

But doing so will override any validators that are provided during initialization

EDIT :

To reflect the form controls with newly added Validators immediately, we have to call this.formGroup.controls["firstName"].updateValueAndValidity(); after setting validators dynamically.

this.formGroup.controls["firstName"].setValidators(Validators.required);
this.formGroup.controls["firstName"].updateValueAndValidity();

DEMO for the same

* NOTE *

updateValueAndValidity() will trigger a valueChanges event even if the value didn't really change (potentially resulting in an infinite loop, if you're calling it from within a valueChanges subscription). You can prevent that by using the optional parameter object: { onlySelf: true, emitEvent: false}

about 4 years ago · Santiago Trujillo Report

0

While Amit Chigadani's answer is correct, please bear in mind the following.

While this solution works for updating validators, the new validators themselves will not be run, until you change the form fields value. it is thus recommended to run the following function straight after you update you validators ;)

In laymans terms: Add the line, If you want your ng-valid and ng-invalid classes to update themselves.

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);
this.formGroup.controls["firstName"].updateValueAndValidity();

In case you only want to update the value and validity of this single control, then add this option

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);
this.formGroup.controls["firstName"].updateValueAndValidity({onlySelf: true});

Another sidenote. In Angular2, one shouldn't use the array syntax to get form group controls, but this

this.formGroup.get("firstName");

Which also accepts the dot notation

this.formGroup.get("userSectionFormGroup.firstName");
about 4 years ago · Santiago Trujillo Report

0

got the solution we can do with the below code.

const validators = new Array<Validators>();
          validations.forEach(validation => {
            switch (validation.Type) {
              case 'required':
                validators.push(Validators.required);
                break;
              case 'minLength':
                validators.push(Validators.minLength(parseInt(validation.Expression, 10)));
                break;
              case 'maxLength':
                validators.push(Validators.maxLength(parseInt(validation.Expression, 10)));
                break;
              case 'pattern':
                validators.push(Validators.pattern(validation.Expression));
                break;
            }
          });
          this.form.controls[i].setValidators(validators);
 }
      }
    });
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!