How to add conditional validators in formBuilder Angular

Question

In Angular 7.x using the formBuilder and ReactiveForms, I am trying to put a validator to a form which is based on the role the user has. So when the user has a different role, he/she is required to put in a field. I store this user in a variable stored in the class.

I don't want to put the validator on the subscription of valueChange but on the initial build. How am I able to do so? Below some code.

 buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber], <-- make this one required if the role of the user is x
      ]),
    });
  }

you can write a custom validator for it and add it to cellPhoneNumber array — ravi
– ravi, Commented May 4, 2019 at 17:44
This might help you: angular.io/api/forms/AbstractControl#setvalidators — R. Richards
– R. Richards, Commented May 4, 2019 at 17:46
can the role of the user change after the validator is setted? — Jota.Toledo
– Jota.Toledo, Commented May 4, 2019 at 17:52

Jota.Toledo · Accepted Answer · 2019-05-05 07:52:33Z

8

Assuming that the role of the user does not change once the validator is setted, an approach would be the following:

import {ValidatorFn, Validators} from '@angular/forms';

function createCellPhoneValidator(user: FooUser): ValidatorFn {
  return user.role === x ? Validators.required : Validators.nullValidator;
}

export class FooComponent {
  buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber, createCellPhoneValidator(this.user)],
    });
  }
}

If the role can change, then you would need to re-evaluate the role every time before performing the validation. This could be done as:

import {ValidatorFn, Validators} from '@angular/forms';

export class FooComponent {
  buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber, this.cellPhoneValidator],
    });
  }

  private readonly cellPhoneValidator: ValidatorFn = c => {
     return this.user.role === "x" ? Validators.required(c) : Validators.nullValidator(c);
   }
}

edited May 5, 2019 at 7:52

answered May 4, 2019 at 17:54

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

1 Comment

Danny Hoeve Over a year ago

That worked! Thanks jota! I couldn't answer your other question in time but you already provided the a solution for that scenario.

Collectives™ on Stack Overflow

How to add conditional validators in formBuilder Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related