Reactive Forms Benefits: Conditional Validation
Tags: angular, reactiveforms
Published: 2020-04-29 15:11:47

---
title: Reactive Forms Benefits: Conditional Validation
published: true
date: 2020-04-29 06:00:00 UTC
tags: angular, reactive forms
canonical_url: https://www.prestonlamb.com/blog/reactive-forms-benefits-conditional-validation
---

## [tldr;](#tldr)

Reactive forms in Angular have many benefits, but one that I’ve found especially useful is the fact that I can easily add or remove validation for a given field based on the value of another field. The simplicity of doing that allows us to create complex forms in a simpler manner. Because we can subscribe to the value changes of the form as a whole or a specific field on the form, we can update the validators for any other field automatically. We’ll go over that in this post.

## [Form Validators](#form-validators)

Angular’s reactive forms functionality allows you to add validators to fields on the form in the component’s class file very easily. You can read more about it in [this post of mine](/blog/reactive-forms-benefits-validators). I’m not going to completely recap that article here, but let’s set up a demo form for this blog post. Let’s pretend that we need to capture some input from a user about their favorite foods. We’ll just be capturing their favorite dessert in this case. If they have a favorite dessert, we want them to enter it. But if they don’t, we don’t want them to enter anything. Here’s the form:

```ts
// form.component.ts

ngOnInit() {
	this.foodForm = this._formBuilder.group({
		hasFavoriteDessert: [null, Validators.required],
		favoriteDessert: ''
	})
}
```

In that code snippet, we created a form with two attributes: `hasFavoriteDessert` and `favoriteDessert`. The first attribute is required, the second one is not. They need to give a response for `hasFavoriteDessert` (possibly through a radio button group or a select element), but currently the `favoriteDessert` is not currently required. If we used this form as it is now, the user could submit the form without providing their favorite dessert. But if we required the `favoriteDessert` attribute and they didn’t have one, they’d have to provide some value for the form to be valid and that’s not what we want either. That’s where conditionally setting validation comes in to play.

## [Conditional Validation](#conditional-validation)

`AbstractControl` items for Angular forms have a couple of convenient methods that we can use for adding and removing validation based on some condition. Those methods are `setValidators`, `clearValidators` and `updateValueAndValidity`. We’ll use these three together to accomplish our conditional validation. We’ll start by listening for changes on the `hasFavoriteDessert` attribute and using the previously mentioned methods to conditionally set the validators. We can do that like this:

```ts
// form.component.ts

ngOnInit() {
    // form setup

    this.foodForm.get('hasFavoriteDessert').valueChanges.pipe(
        tap((hasFavoriteDessert: boolean) => {
            if (hasFavoriteDessert) {
                this.foodForm
                  .get('favoriteDessert')
                  .setValidators(Validators.required);
            } else {
                this.foodForm
                  .get('favoriteDessert')
                  .clearValidators();
            }
            this.foodForm
              .get('favoriteDessert')
              .updateValueAndValidity();
        })
    ).subscribe()
}
```

> Don’t forget to unsubscribe from this observable when the component is destroyed!

What we’re doing here is subscribing to the observable that emits a value every time the `hasFavoriteDessert` attribute value changes. We `tap` into the stream and use the current value from the attribute to do something. In this case, we check if it’s `true` and if so we set the validators for the control. It can be a single validator like I have done or it can be an array of validators. If the value is `false`, we clear all the validators. But the last part is very important as well. Outside the `if` statement we call one more method on the control, and that’s the `updateValueAndValidity` method. If we don’t call this, we can’t be sure that the component/form will know to require our field or let it be empty.

That’s really all you need to do! Your conditions can be more complex if needed, but the process will be the same either way.

## [Conclusion](#conclusion)

Reactive forms give us a lot of flexibility in our forms and validators are one of my favorite parts of them. From being able to create custom validators (on top of all the built in validators that Angular has) to being able to conditionally add that validation to controls, reactive forms are a great option for your app.