Dynamic validation in Angular reactive forms

Question

I have a reactive form in Angular. How can I perform a required validation on tax only if openDate and closeDate have been populated?

this.employerBasicsForm = this.fb.group({
  tax: ['', [Validators.required],
  openDate: [''],
  closeDate: [''],
});

You can "disabled" the formControl "tax" when not openDate and closeDate and enabled if has a value — Eliseo
– Eliseo, Commented Mar 16, 2021 at 10:27

Eliseo · Accepted Answer · 2021-03-16 13:39:33Z

1

Andrew some like

  employerBasicsForm = new FormGroup(
    {
      tax: new FormControl(),
      openDate: new FormControl(),
      closeDate: new FormControl()
    },
    this.validationTax()
  );

  validationTax() {
    return (group: FormGroup) => {
      return group.value.openDate && group.value.closeDate && !group.value.tax
        ? { required: true }
        : null;
    };
  }

Are not very complex. For me it's the best solution, but I also respect your opinion. Well, in this case I use a function in the own component because this validator are not used never outside the component

answered Mar 16, 2021 at 13:39

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Comments

StephenHealey86 · Accepted Answer · 2021-03-15 20:13:14Z

0

Write your own ValidatorFn. You can use it in the form group and access the form controls to check their state or use it on the form control itself and access the sibling controls through the form control parent property.

https://angular.io/api/forms/ValidatorFn

answered Mar 15, 2021 at 20:13

StephenHealey86

813 bronze badges

Comments

E_net4 · Accepted Answer · 2021-03-16 08:30:42Z

0

Here is the answer, no custom validator required in this case:

Make your form normally without validator to begin with:

this.employerBasicsForm = this.fb.group({
  tax: [''],
  openDate: [''],
  closeDate: [''],
});

A change method is required on both your openDate and closeDate fields:

<div><input type="text" formControlName="openDate" (change)="checkFields()" /></div>
<div><input type="text" formControlName="closeDate" (change)="checkFields()" /></div>

Then in your checkFields method:

checkFields() {

// Clear the validator every time a change occurs
this.employerBasicsForm.controls.tax.clearValidators();

// If both fields have been filled in, then make tax required
if ((this.employerBasicsForm.controls.openDate.value != null && this.employerBasicsForm.controls.closeDate.value != null))
{
  this.employerBasicsForm.controls.tax.setValidators([Validators.required]);
}

// Update the validity
this.employerBasicsForm.controls.tax.updateValueAndValidity();
}

edited Mar 16, 2021 at 8:30

E_net4

30.5k13 gold badges118 silver badges155 bronze badges

answered Mar 15, 2021 at 20:30

Andrew Howard

3,0937 gold badges41 silver badges72 bronze badges

3 Comments

Eliseo Over a year ago

in general is more "robust" use a custom Validator than "play" adding/remove validators. Else you need take account if you start with the values of the form populate or not

Andrew Howard Over a year ago

@Eliseo I respectfully disagree. To have a custom validator for this situation would be cumbersome. Custom validators are great if you intend to have the same validation issue occur in multiple forms across your app and that all those forms are structured in the same way which you can't guarantee. The solution above would still work if the form is already populated or not.

Eliseo Over a year ago

I also respect your opinion but if you see my answer I don't see difficult create a custom validator

Collectives™ on Stack Overflow

Dynamic validation in Angular reactive forms

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related