Quick Solution: Conditional Required Validation Angular Reactive Forms

Here I will discuss the conditional required validation in advanced reactive forms. I am assuming that you have some basic understanding of angular reactive forms. If not then please refer angular reactive form doc first.

Below are the scenarios you will learn in this article:

1. Conditionally required validation in two fields of same FormGroup .
   Scenario: If the age is greater-than 18 then license number field is required.
2. Conditionally required validation in nested FormGroup based on root FormGroup; FormControl value changes.
   Scenario: If the user permanent address is different than the current address then permanent address fields are required.

conditional required validation working example

The Challenge

There are some good articles are available for conditional required validation in angular reactive forms. In every article, I see some bottleneck while working on large forms with multiple validators on one FormControl and some of the validators should apply based upon some other FormControl values. If I follow the standard approach then I have to subscribe to valuechange of the FormControl and put if/else clause accordingly. which is a bit clumsy in the application while working on large forms.

Solution

Let’s start building the conditional required form validation with rxweb reactive form validators (@rxweb/reactive-form-validators). I will describe at the end of this article “why I have used @rxweb/reactive-form-validators”.

Step 1: Install the package of rxweb.
npm install @rxweb/reactive-form-validators

Step 2: Register the ‘RxReactiveFormsModule’ in the root module. Here is the code of register the ‘RxReactiveFormsModule’ in AppModule.

Step 3: Create the FormGroup and let’s cover the scenarios step by step.

• Scenario 1 (If the age is greater-than 18 then license no is required.):
  I have used required validator of RxwebValidators to apply conditional validation on licenseNo field.
  Here is the code of conditionally required validation of licenseNo:

conditional required license number.

You don’t need to do anything on the age field, the validation framework automatically manage when the value has been changed in age then automatically it will mark licenseNo field is valid or invalid.

• Scenario 2
  let's extend the properties of previously created ‘userFormGroup’. I am adding ‘isSameAddress’ property in root userFormGroup object and creating Nested FormGroup object of currentAddress and permanentAddress.

conditional validation nested FormGroup controls.

In the above code, I have set the conditionalExpression of required validator in areaName and city FormControl of permanentAddress nested FormGroup. Both two fields will be required if ‘isSameAddress’ FormControl value is ‘false’.

Binds the HTML as per standard angular practices.

Why @rxweb/reactive-form-validators package?

There are lots of benefits with this validation framework, If I talk about conditionally required validation then it is very easy to implement. You just have to put a required validator with conditional expression while creating a FormControl. This will automatically manage value change of the respective properties which you have used in a conditional expression.

Here is the complete working example of conditionally required validation.

angular-reactive-form-conditional-required-validation-rxweb-val - StackBlitz

If you have questions or comments about this let me know in the comments below.