7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.8 Creating Custom Validators for Reactive Forms

In this lesson you'll learn how to create a custom validator that we can use when building a reactive form.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


5.8 Creating Custom Validators for Reactive Forms

Hi, folks. In this lesson we're going to see how we can create a custom validator that we can use with a reactive form. The difference between creating a validator for a reactive form compared to creating a validator for a template driven form. Is that with a reactive form, we don't have to wrap the validator in a directive, and that means that our code is a little bit smaller and a little bit simpler, and that can only be a good thing, right? In the last lesson, we created a directive-based validator that we added to an elements within a template. We could use this directive on the input in the template for our reactive form if we wanted to, And it would work in exactly the same way. So we could just add a new error message for this particular error below the existing one. So notice that we used another convenience method here, the get error method, which allows us to get the value of a specific named error. And this helps to avoid interacting with complex nested object structures, and avoids template errors in the case where the error objects does not yet exist. So let's just go back to the browser and see if this works. And we can see that it does. So, we can use a directive-based validator in a reactive form if we want to, no problem at all. But the point that I wanna make it, is that we can create a pure validator which we can use for the reactive form. But this won't work with a template-driven form. So we can use a validating directive in both a template-driven form and a reactive form, but we can only use a pure validator in a reactive form. So we're going to create a custom validator in this lesson, and that's gonna be for the feedback form which as we know is a reactive form. So for this one, let's validate that the message that gets entered into the text area isn't in all capitals. If it is, the sender is probably quite angry and we don't wanna receive messages from angry people. We can't use the CLI to generate a validator yet, unfortunately, so we'll just have to create this file ourselves. Let's start by creating an underscore validators folder. Like most of the other things that we've created, validators should be super generic and we could use them in many places through our app. So they don't belong to any particular component or feature. So let's call our validator, not-or-caps.validator.ts. So first of all we'll need to import some things from the Angular. We only need a couple of things here. We need the abstract control class, just for type information really, and the Validator Fn interface, again mostly just for typing information. So now we can add the validator itself, which is just a simple function. And I've spelled abstract control wrong, let's just fix that quickly. So we're exporting a function called, not all caps, but notice that the function returns another function. The function that it returns is a validator function. So the function that gets returned from our validator will be the function that Angular invokes and passes a control to in order to validate it. So this is pretty similar to the other validator that we created in the last lesson, it will also return an object if the validation fails. We've used an array function here, and this function will receive a control and that will be of the type, abstract control. And this will be the control from the form that is being validated. So inside the validation function then, we just want to test whether the whole of the value of the text area is in upper case. And if so, we can return an object. So we've got a simple regular expression here that just checks whether or not the value is any upper case letter between A to Z, one or more times. And that constitutes the whole of the value from start to finish, and the regular expression should be global. So that should be all we need. We can use the test method of the regular expression to test it again the value of the control. And if we find that it is all in upper case, we can return this object with a not all caps key and a message that says, no shouting please. So this is much simpler than the validation directive that we created in the last lesson. So now, we'll want to use this in the feedback components. So first of all we'll need to import it there. The message control that we create in the ngOnInit, already has the required validator, so we should use the compose method to compose the existing validator with the new one that we've just created. As our validator contains a function which returns the actual validator, we should invoke the function that we imported in order to pass the actual validator function to Angular. So last of all, let's add a new error message for this in the template. That should be all we need to do. So let's go back to the browser now. And let's open up the feedback form, and let's add a shouty message. Okay, so it looks like the custom validator is working. So, in this lesson we saw how to create a custom validator function that we can use with our reactive forms. The validator function is much simpler without the additional directive stuff in there, and using the custom validator in the component couldn't be any easier. We use it almost as if it was just one of Angular's own built-in validators. The only trade off is that we can't use this validator in a template-driven form, not without wrapping it in a directive. Thanks for watching.

Back to the top