Angular Advanced: Validators, Interceptors, and Guards

Name: Angular Advanced: Validators, Interceptors, and Guards
Author: Farhan Saleem

Learn how to create validation in reactive forms and learn how to use route guards

Preview the first lesson free — get full access to all 5 lessons.

Course: On-Demand

Hi, my name is Farhan. I'll be showing you how to do synchronous validation, create custom validators, create guards, and how we can use that to protect routes and content in an Angular application. Let's start by looking at validation and reactive forms. In Angular, reactive forms, there's two types of validation configurations that you can do. One is by creating the form group and form controls, and each form control is followed by an array of synchronous validators. There's a list of synchronous validators that Angular provides to you out of the box. And those are here. If you go to the angular.io documentation, you can see under validators, it lists out all the predefined validators available to you for your form controls, and you can just implement them right out of the box, and I'll show you how you can do that. But it's good to be aware of them, so you don't have to create these which are already given to you. And the second way of defining the validations in the reactive form is by explicit validator attributes. In this case, inside a form group, you have an email field, which has a list of synchronous validators, and which are explicitly called out by the validators, and a list of asynchronous validators, and let's talk about what those are. Asynchronous validators are validators which you could require possibly to do some sort of validation behind the scenes for input that's coming in from the user. Maybe you require to do a backend API call to validate some information. That would be a good example of an asynchronous validator which runs behind the scenes and then gives you the final output of whether that input is valid or not. So I have created a simple Angular application, and this application I have created, I've also added the Angular Material library, and added that. And in the Angular module, app module, I have included the mat forms and mat input module. And I've created a login simple Angular form by generating the component. Inside the component, I have a form group. This form group has a two fields, an email and a password. And as you can see, both are defined over here. One is given an email type for the input and the other one is given the password type. And when I'm configuring the validation for this, I have first given some synchronous validators for the email field. I've given it the required validator and an email validator which checks to see if the input is in our pattern which is tested by a regular expression to see if it matches an email address pattern. These are gonna be triggered on an event that you can define on update on. There's various events that you could trigger the validation on, I'm firing it on the blur when the user goes off of the control. And the second control for password, I've got the required validator and a min length validator of length of eight. So both of these are available now on the email and password just by simply describing them in a validators. So I also wanted to point out this is the two different ways I was showing you of how to send the synchronized validators to the form. In the email control, I have given it the simpler definition of just providing the validators in one array and that's fine. In the email field, I have actually defined the validators explicitly by calling it out for the validators property. And in the password field, I have given the validators just as a common array which Angular will take as synchronous validators. I've also created a custom validator which is called create password strength validator. And if you look at the file password strength validator, it is basically of a type validator function. You can create a custom validator by creating a function like this and just basically returning a type of validation errors and it takes in an input of abstract control, which is our form controlled base class. And inside here, you can do any type of validation for my field for password. I am taking the control value and if it's null, I go back and there's no validation required for that. But if it has a value, I put some regular expressions to test it with and it needs to have an uppercase, lowercase and numeric value and a special character inside as well. And in the end, the password valid is a combination of all of those test results and I return the password value back from the validator function. So if I go back to the password field, you can see this is the custom validator I defined over here. Let's take a look at the application. So this is the form that I have. If I try to type in an email address, which is not passing the formatting of the email field, it will display that in red to flag it. I have to give it a type of email address and then it takes it. And the password, if I don't satisfy the custom validator, it shows an error saying that it's not matching the required criteria for this field. So let me try to put in something which has numbers, special characters, upper and lower characters and now you can see it's validated that. That means that the custom validator over here has passed the test defined over here and is returning true. Also an important thing to understand for the form validation is I have created a button over here, which is to submit the form. But what I want to show you is for the form, I can actually see if the form state is valid or not. The form status is only valid if all the validation on the form itself is passing. So this is disabled as long as the form is not valid as you can see over here. So this is also pretty useful if you want to prevent the user to submit any login information or any customer information which is invalid and not passing the validation that you've given into the form. So that's how you do custom validators and include some synchronous validations in the next lesson. We'll take a look at how to do custom errors and how to show and hide them on the form. Thank you for watching.

Advanced Provider : Farhan Saleem 5 Lessons · 29m in English

Course Description

Building user forms is a critical part of any modern UI application. As developers, we need to implement many common validation functions that are available to us to put together for most common scenarios in user forms. You will learn how to create custom validators for creating customized validations you need for your application. You will also learn what Angular route guards are, how they are configured for routes, and how can you protect access to pages and UI components by configuring logic in these guards. We’ll also cover how to set different levels of access in nested routes or pages. Angular gives you the ability to create guards to customize authentication and restrict access to any content on any level in your application.

In these lessons on Validation and Route Guards, you will learn how to create robust validation in reactive forms. You will learn to use out-of-the-box form validation provided to developers in Angular framework, as well create custom validation to handle complex scenarios. You will also learn how to use route guards to write custom logic to check whether the user can be allowed access to routes and pages.

What You'll Learn

Create custom validators to build tailored validations for your application's user forms
Use out-of-the-box form validation provided by the Angular framework in reactive forms
Show or hide validation errors to handle complex validation scenarios
Configure Angular route guards to protect access to pages and UI components
Write custom guard logic to check whether a user can access routes and pages
Set different levels of access in nested routes and restrict content at any level

Key Takeaways

Building user forms is a critical part of any modern UI application, and validation handles most common scenarios in those forms.
Angular provides out-of-the-box form validation, and developers can also create custom validators for complex scenarios.
This course teaches how to create robust validation in reactive forms.
Route guards let developers write custom logic to determine whether a user is allowed access to routes and pages.
Angular guards can customize authentication and restrict access to content at any level in the application, including nested routes.

Frequently Asked Questions

What does this course cover?

It covers creating custom validators and robust validation in Angular reactive forms, showing or hiding validation errors, and using route guards to restrict access to routes, pages, and UI components, including setting different access levels in nested routes.

Who is this course for?

It is for developers building user forms in modern UI applications who want to implement both out-of-the-box and custom validation in reactive forms and control access to pages using route guards.

What skills will I gain?

You will gain skills in Angular, Angular Components, Angular Reactive Forms, Angular UI, Ng Controller, and Validation Controls.

What lessons are included?

The lessons are Custom Validators, Show or Hide Validation Errors, Restricting Routes With Angular, Guards in Angular, and Using a Guard in Application.

What will I be able to do with route guards after this course?

You will be able to configure guards for routes, write custom logic to check whether a user can access routes and pages, customize authentication, and restrict access to content at any level, including nested routes.