How can I validate reactive form controls programmatically?

Question

I have a FormGroup object of my reactive form. Now I want to trigger the form validation programmatically.

I already check the form with this code, but my control css status classes aren't set, like it's done when I click the control and click outside the control.

if (!this.formGroup.valid) {
  // TODO: Fix that invalid controls don't get highlighted
  return;
}

Not sure the CSS has to do with that, but try this.formGroup.updateValueAndValidity(). — user4676340
– user4676340, Commented Oct 18, 2018 at 13:45
As said, I don't think your CSS issue has to do with the form validation. I think that the detection provided isn't what suits you best. Let me give you a suited answer. — user4676340
– user4676340, Commented Oct 18, 2018 at 14:01

Nikita Popov · Accepted Answer · 2020-02-26 00:04:55Z

12

You can programmatically trigger the validator using the following.

this.formGroup.controls['controlNameHere'].markAsTouched();

edited Feb 26, 2020 at 0:04

Nikita Popov

89510 silver badges21 bronze badges

answered Oct 18, 2018 at 13:59

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

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

Comments

user4676340 · Accepted Answer · 2018-10-18 14:03:34Z

3

When you create a reactive form, you implicitly says that the form should update its values and validity on a specific strategy.

There are 3 strategies :

On blur
On change
On submit

You can change the update strategy when you create your form controls or your form group. In your case, the change strategy should work.

Here is a stackblitz containing both strategies, see what suits you best.

first = new FormControl('', {
  validators: [Validators.minLength(3)],
  updateOn: 'blur'
})
second = new FormControl('', {
  validators: [Validators.minLength(3)],
  updateOn: 'change'
})

answered Oct 18, 2018 at 14:03

user4676340

1 Comment

Ian Poston Framer Over a year ago

this is a nice simple approach to adding maxLength validation to a specific formControl input and per the stackblitz you shared an easy way to throw the validation error in the HTML <div class="error" *ngIf="first.hasError('maxlength')">Task can be max 40 characters long.</div>

WasiF · Accepted Answer · 2021-06-30 05:48:17Z

3

Validate all form fields

validateAllFormFields(formGroup: FormGroup) {
  Object.keys(formGroup.controls).forEach(field => {
    const control = formGroup.get(field);

    if (control instanceof FormControl) {
      control.markAsTouched({ onlySelf: true });
    } 
    else if (control instanceof FormGroup) {
      this.validateAllFormFields(control);
    }
  });
}

answered Jun 30, 2021 at 5:48

WasiF

29.2k16 gold badges130 silver badges137 bronze badges

Collectives™ on Stack Overflow

How can I validate reactive form controls programmatically?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related