1
00:00:00,150 --> 00:00:05,700
In this lecture, we will validate the user's email by checking if their email is unique.

2
00:00:06,090 --> 00:00:10,350
We left off with the validate function in the email taken file.

3
00:00:12,850 --> 00:00:19,210
It's a required function by the async validator interface at the moment, we are getting an error for

4
00:00:19,210 --> 00:00:20,110
its definition.

5
00:00:20,440 --> 00:00:26,470
Upon further inspection, we will get a cluttered message about the error, in my opinion.

6
00:00:26,650 --> 00:00:31,630
I'm not a big fan of this error message instead of trying to understand this message.

7
00:00:31,810 --> 00:00:38,560
We should check out the documentation for the async validator interface in the resource section of this

8
00:00:38,560 --> 00:00:39,160
lecture.

9
00:00:39,400 --> 00:00:43,210
I provide a link to this Interfaces documentation page.

10
00:00:45,760 --> 00:00:52,300
Scrolling to the Methods section, we will find more information on how to write the validate function.

11
00:00:52,750 --> 00:00:56,470
The validate function will have one parameter called control.

12
00:00:56,860 --> 00:01:00,880
It's a reference to the control the validator has been applied to.

13
00:01:01,480 --> 00:01:08,380
The most important piece of information is the return value we have the option of returning and observable

14
00:01:08,380 --> 00:01:09,310
or promise.

15
00:01:09,670 --> 00:01:15,340
In either case, a validation errors object or no value must be returned.

16
00:01:15,730 --> 00:01:21,700
Angular will automatically subscribe to an observable if we decide to return an observable.

17
00:01:22,060 --> 00:01:28,630
If we return a promise, Angular will wait for the resolved value for this demonstration.

18
00:01:28,750 --> 00:01:30,730
We are going to use a promise.

19
00:01:31,000 --> 00:01:32,890
It'll be much simpler to write.

20
00:01:33,190 --> 00:01:35,140
Let's go back to our editors.

21
00:01:37,750 --> 00:01:44,800
Before writing the logic of the validate function, let's annotate the parameter and return value at

22
00:01:44,800 --> 00:01:46,030
the top of the file.

23
00:01:46,060 --> 00:01:53,200
We will update the import statement from the angular slash forms package to include the abstract control

24
00:01:53,200 --> 00:01:55,270
and validation errors types.

25
00:01:57,770 --> 00:02:02,180
Next, we will add the control parameter to the validate function.

26
00:02:02,570 --> 00:02:06,020
It will be annotated with the abstract control class.

27
00:02:08,570 --> 00:02:12,560
For the return value, we will explicitly return a promise.

28
00:02:12,920 --> 00:02:18,440
The value resolved by the promise will be a validation errors object or null.

29
00:02:23,370 --> 00:02:30,480
The return value will be similar to a synchronous validator if we return an object, angular will assume

30
00:02:30,480 --> 00:02:32,910
the control did not pass validation.

31
00:02:33,240 --> 00:02:37,650
It'll add the object to the errors property on the respective control.

32
00:02:38,040 --> 00:02:43,100
We must return null if validation passes inside our function.

33
00:02:43,170 --> 00:02:49,230
We are going to return the fetch signing methods for email function from the authentication service.

34
00:02:51,860 --> 00:02:58,640
The fetch function is defined by Firebase in the resource section of this lecture, I provide a link

35
00:02:58,640 --> 00:02:59,540
to this function.

36
00:03:02,160 --> 00:03:09,060
There isn't an official function for checking if an email is unique in most cases, Firebase recommends

37
00:03:09,060 --> 00:03:11,430
using this function as an alternative.

38
00:03:11,760 --> 00:03:15,900
Users have two options for registering an account with their email.

39
00:03:16,290 --> 00:03:19,380
They can provide a password or go password less.

40
00:03:19,920 --> 00:03:23,760
Firebase supports both types of authentication systems.

41
00:03:24,150 --> 00:03:29,070
This function will tell us which type of registration the user has opted into.

42
00:03:29,430 --> 00:03:36,300
According to the documentation, this function returns a promise the promise will resolve to an array

43
00:03:36,300 --> 00:03:37,140
of strings.

44
00:03:37,740 --> 00:03:40,650
Honestly, we don't care which system they're using.

45
00:03:40,950 --> 00:03:44,040
We're using this function for an alternative scenario.

46
00:03:44,400 --> 00:03:49,680
If the email does not exist in our app, Firebase will return an empty array.

47
00:03:50,070 --> 00:03:52,140
We can assume the email is unique.

48
00:03:52,560 --> 00:03:55,580
On the other hand, if the array has values.

49
00:03:55,620 --> 00:03:56,940
The email is taken.

50
00:03:57,300 --> 00:04:02,100
We can use this function to check if an email exists within Firebase.

51
00:04:02,370 --> 00:04:04,050
Let's go back to our editor.

52
00:04:06,650 --> 00:04:09,560
First, we will need to provide an email.

53
00:04:09,950 --> 00:04:13,700
We have to access the email through the control parameter.

54
00:04:14,240 --> 00:04:17,570
Let's pass in the control value property.

55
00:04:20,029 --> 00:04:23,120
Next, we are going to change the then function.

56
00:04:25,630 --> 00:04:31,540
Even though the fetch function returns a promise, we should change the value resolved by the promise

57
00:04:31,810 --> 00:04:35,980
by default, the fetch function returns an array of strings.

58
00:04:36,280 --> 00:04:42,730
We are going to modify this value to return an error object or null in the event function.

59
00:04:42,820 --> 00:04:46,120
We will pass in an arrow function with the response.

60
00:04:48,700 --> 00:04:53,380
The return value from our arrow function will be a ternary operator.

61
00:04:53,710 --> 00:04:56,620
We will check if the response array has a length.

62
00:04:57,010 --> 00:05:00,070
If it does, we can assume the email is taken.

63
00:05:00,370 --> 00:05:06,070
We will return an object with a property called email, taken with a value of true.

64
00:05:08,670 --> 00:05:10,950
Otherwise we will return null.

65
00:05:13,510 --> 00:05:15,460
Our validator is almost ready.

66
00:05:15,670 --> 00:05:19,030
There are a couple of hiccups to fix in the next lecture.

67
00:05:19,150 --> 00:05:21,430
We are going to finish our validator.