How to do Conditional Validation on valueChanges method in Angular Reactive Forms

Read full article on the Infragistics blog

In this blog post, we will learn to use Angular Reactive Forms value change detection and enable conditional validation on basis of that.

Learn How to Create Your First Angular Reactive Form here

Let us say you have a Reactive Form created using FormBuilder class as shown below:

	ngOnInit() {
	this.loginForm = this.fb.group({
	email: [null, Validators.required],
	password: [null, [Validators.required, Validators.maxLength(8)]],
	phonenumber: [null]
	});

	}

view raw

conditionalrform1.js

hosted with ❤ by GitHub

You have created loginForm, which has three controls: email, password, and phonenumber. Here, you are using FormBuilder to create a reactive form. On the component template, you can attach loginForm as shown in the code listing below. Using property binding, the formGroup property of the HTML form element is set to loginForm and the formControlName value of these controls are set to the individual FormControl property of FormBuilder.

	<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
	<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
	<div class="alert alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
	Email is required
	</div>
	<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
	<input formControlName='phonenumber' type="text" class="form-control" placeholder="Enter Phone Number" />
	<div class="alert alert-danger" *ngIf="loginForm.get('phonenumber').hasError('required') && loginForm.get('phonenumber').touched">
	Phone Number is required
	</div>
	<br />
	<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
	</form>

view raw

conditionalrform2.html

hosted with ❤ by GitHub

We have also put error messages for email and phone number fields. Besides, that submit button would only be enabled when the form is valid. Form submit is handled as shown in the listing below:

	loginUser() {
	console.log(this.loginForm.status);
	console.log(this.loginForm.value);
	}

view raw

conditionalrform3.js

hosted with ❤ by GitHub

If the form is valid in browser console, you will get the output as below:

In addition, if there is an error, submit button would be disabled and an error message will be shown as below:

You can learn to create Custom Validators for Angular Reactive Forms here

Now assume a scenario that you have a radio button to send a notification. The user should able to select the send notification option, and on basis of that, certain FormControl will have some validation.

Consider the form below,

We have added a Send Notification option. If the user selects Phone to send notification then Phone Number field should be required, otherwise, it should not be. To achieve this we need to perform following tasks,

Listening to changes
Put conditional validation

To start with, let us modify our form to handle the notification. So now form has a notification FormControl with the default value set to null as shown in the listing below :

	this.loginForm = this.fb.group({
	email: [null, Validators.required],
	password: [null, [Validators.required, Validators.maxLength(8)]],
	phonenumber: [null],
	notification: ['email']
	});

view raw

conditionalrform5.js

hosted with ❤ by GitHub

On the Reactive form template, we will add radio button group to handle Send Notification option.

Continue Reading full article on the Infragistics blog here

Rate this:

Enter your comment here…

Fill in your details below or click an icon to log in:

Email (required) (Address never made public)

Name (required)

Website

You are commenting using your WordPress.com account. ( Log Out / Change )

You are commenting using your Facebook account. ( Log Out / Change )

Cancel

Connecting to %s

Dhananjay Kumar