1
00:00:00,120 --> 00:00:06,390
In this lecture, we are going to create an asynchronous validator, every validator we've worked with

2
00:00:06,390 --> 00:00:12,450
has been synchronous angular was able to receive a response from our validators right away.

3
00:00:12,900 --> 00:00:19,470
Often times we may need to perform an asynchronous request from a validator out of the box.

4
00:00:19,680 --> 00:00:22,560
Angular supports asynchronous validators.

5
00:00:23,130 --> 00:00:27,180
The goal of the next validator will be to validate an email.

6
00:00:27,480 --> 00:00:31,920
We should deny users from registering an account if an email is taken.

7
00:00:32,340 --> 00:00:37,140
Creating this type of validator will require an asynchronous request.

8
00:00:37,830 --> 00:00:43,890
The process of creating an asynchronous validator is slightly different from asynchronous validator.

9
00:00:44,280 --> 00:00:47,970
The biggest difference is how to handle dependency injection.

10
00:00:48,390 --> 00:00:51,960
Let's look at the register of validators file for a moment.

11
00:00:54,530 --> 00:00:59,240
The match function is a static method, we talked about this before.

12
00:00:59,540 --> 00:01:03,230
Static methods do not have access to the this key word.

13
00:01:03,560 --> 00:01:10,040
Properties and methods on a class are inaccessible from a static method that works great for our match

14
00:01:10,040 --> 00:01:10,820
validator.

15
00:01:11,150 --> 00:01:15,500
However, a static method will not work for our next validator.

16
00:01:16,070 --> 00:01:22,760
The goal of our validator is to check if an email is taken as the user types in the email field of the

17
00:01:22,760 --> 00:01:23,960
registration form.

18
00:01:24,350 --> 00:01:31,400
We will need to perform a request to Firebase our primary way of communicating that Firebase is with

19
00:01:31,400 --> 00:01:32,090
a service.

20
00:01:32,420 --> 00:01:36,860
Therefore, we're going to need to inject the service into the validator.

21
00:01:37,250 --> 00:01:43,040
If we were to use a static method, we would not be able to access and injected service.

22
00:01:43,670 --> 00:01:47,180
We are going to create a separate class for our validator.

23
00:01:47,420 --> 00:01:52,850
Technically, we could define the validator inside the register validators class.

24
00:01:53,150 --> 00:01:59,060
However, we should keep our synchronous and asynchronous validators in separate files.

25
00:01:59,360 --> 00:02:03,140
We will define synchronous validators inside this class.

26
00:02:03,440 --> 00:02:13,520
Let's get started and the command line run the following command nji g class user slash validators slash

27
00:02:13,640 --> 00:02:14,690
email taken.

28
00:02:17,170 --> 00:02:20,230
Next, let's open this file in our editor.

29
00:02:22,750 --> 00:02:28,960
As we discussed earlier, we're going to need to inject the authentication service into this class.

30
00:02:29,380 --> 00:02:35,770
It's for communicating with the authentication service or storing the email in the authentication service

31
00:02:35,770 --> 00:02:36,790
and database.

32
00:02:37,120 --> 00:02:41,140
Using either service is a valid approach for this case.

33
00:02:41,290 --> 00:02:43,900
We will stick with the authentication service.

34
00:02:44,260 --> 00:02:48,140
The code for checking an email will be simpler with this service.

35
00:02:48,490 --> 00:02:53,610
At the top of the file, we will import the angular fire off service.

36
00:02:56,040 --> 00:02:59,460
Next, we will add the constructor to the class.

37
00:03:01,920 --> 00:03:06,750
Lastly, we will inject the service as a private property called off.

38
00:03:09,450 --> 00:03:14,080
There's a catch to adding support for dependency injection by default.

39
00:03:14,340 --> 00:03:17,070
Classes cannot be injected with services.

40
00:03:17,430 --> 00:03:18,880
We need to chill angular.

41
00:03:18,900 --> 00:03:21,930
A class can be injected with services.

42
00:03:22,290 --> 00:03:24,360
We never had to perform this task.

43
00:03:24,360 --> 00:03:30,960
When working with components, Angular will automatically add dependency injection support for a component

44
00:03:30,960 --> 00:03:31,950
on our behalf.

45
00:03:32,250 --> 00:03:34,790
The same goes for services directives.

46
00:03:35,130 --> 00:03:42,510
If we're creating a plain JavaScript class, we need to manually inform Angular that we need dependency

47
00:03:42,510 --> 00:03:43,230
injection.

48
00:03:43,650 --> 00:03:50,400
We can add dependency injection support by decorating the class with the injectable decorator at the

49
00:03:50,400 --> 00:03:51,510
top of the file.

50
00:03:51,660 --> 00:03:55,920
Import this decorator from the angular slash core package.

51
00:03:58,360 --> 00:04:03,250
Next, we will decorate our email taking class with this decorator.

52
00:04:05,810 --> 00:04:11,480
By adding this decorator, we will be able to inject services into the constructor function.

53
00:04:11,900 --> 00:04:17,930
This step is very important, otherwise we may encounter problems when using our validator.

54
00:04:18,260 --> 00:04:23,060
There's one more step we will perform before writing the logic of the validator.

55
00:04:23,630 --> 00:04:29,940
Angular has an interface for classes that are asynchronous validators for type safety.

56
00:04:29,960 --> 00:04:36,110
We should implement this interface on our class, you know, help us develop our validator by providing

57
00:04:36,110 --> 00:04:42,800
information on the methods and properties required for an asynchronous validator at the top of the file.

58
00:04:43,010 --> 00:04:49,520
We will import an interface called async validator from the Angular Slash Forms package.

59
00:04:51,990 --> 00:04:55,650
Next, we will implement this interface on our class.

60
00:04:58,130 --> 00:05:03,050
We all get an error from TypeScript if we hover our mouse over the error.

61
00:05:03,230 --> 00:05:07,380
We will be given more information by implementing this interface.

62
00:05:07,460 --> 00:05:10,380
We must define a method called validator.

63
00:05:10,640 --> 00:05:12,410
Let's define it in our class.

64
00:05:14,950 --> 00:05:20,620
After doing so, we will receive an error this lecture is starting to get a little too long.

65
00:05:20,920 --> 00:05:24,220
Let's work on the logic for this method in the next lecture.

66
00:05:24,520 --> 00:05:25,540
I'll see you there.