In this lecture, we are going to create an asynchronous validator, every validator we've worked with
has been synchronous angular was able to receive a response from our validators right away.
Often times we may need to perform an asynchronous request from a validator out of the box.
Angular supports asynchronous validators.
The goal of the next validator will be to validate an email.
We should deny users from registering an account if an email is taken.
Creating this type of validator will require an asynchronous request.
The process of creating an asynchronous validator is slightly different from asynchronous validator.
The biggest difference is how to handle dependency injection.
Let's look at the register of validators file for a moment.
The match function is a static method, we talked about this before.
Static methods do not have access to the this key word.
Properties and methods on a class are inaccessible from a static method that works great for our match
validator.
However, a static method will not work for our next validator.
The goal of our validator is to check if an email is taken as the user types in the email field of the
registration form.
We will need to perform a request to Firebase our primary way of communicating that Firebase is with
a service.
Therefore, we're going to need to inject the service into the validator.
If we were to use a static method, we would not be able to access and injected service.
We are going to create a separate class for our validator.
Technically, we could define the validator inside the register validators class.
However, we should keep our synchronous and asynchronous validators in separate files.
We will define synchronous validators inside this class.
Let's get started and the command line run the following command nji g class user slash validators slash
email taken.
Next, let's open this file in our editor.
As we discussed earlier, we're going to need to inject the authentication service into this class.
It's for communicating with the authentication service or storing the email in the authentication service
and database.
Using either service is a valid approach for this case.
We will stick with the authentication service.
The code for checking an email will be simpler with this service.
At the top of the file, we will import the angular fire off service.
Next, we will add the constructor to the class.
Lastly, we will inject the service as a private property called off.
There's a catch to adding support for dependency injection by default.
Classes cannot be injected with services.
We need to chill angular.
A class can be injected with services.
We never had to perform this task.
When working with components, Angular will automatically add dependency injection support for a component
on our behalf.
The same goes for services directives.
If we're creating a plain JavaScript class, we need to manually inform Angular that we need dependency
injection.
We can add dependency injection support by decorating the class with the injectable decorator at the
top of the file.
Import this decorator from the angular slash core package.
Next, we will decorate our email taking class with this decorator.
By adding this decorator, we will be able to inject services into the constructor function.
This step is very important, otherwise we may encounter problems when using our validator.
There's one more step we will perform before writing the logic of the validator.
Angular has an interface for classes that are asynchronous validators for type safety.
We should implement this interface on our class, you know, help us develop our validator by providing
information on the methods and properties required for an asynchronous validator at the top of the file.
We will import an interface called async validator from the Angular Slash Forms package.
Next, we will implement this interface on our class.
We all get an error from TypeScript if we hover our mouse over the error.
We will be given more information by implementing this interface.
We must define a method called validator.
Let's define it in our class.
After doing so, we will receive an error this lecture is starting to get a little too long.
Let's work on the logic for this method in the next lecture.
I'll see you there.