1
00:00:00,120 --> 00:00:03,960
In this section, we are going to revisit the topic of validation.

2
00:00:04,230 --> 00:00:05,340
I know what you're thinking.

3
00:00:05,430 --> 00:00:07,560
We've spent hours on these forums.

4
00:00:07,770 --> 00:00:09,520
What else could we possibly add?

5
00:00:09,840 --> 00:00:13,470
Forms are one of the most complex types of UI to create.

6
00:00:13,830 --> 00:00:17,820
There are various scenarios and edge cases we need to account for.

7
00:00:18,120 --> 00:00:20,340
The forms we've developed are incomplete.

8
00:00:20,670 --> 00:00:23,910
There are two major issues with the registration form.

9
00:00:24,450 --> 00:00:27,900
Firstly, we're not checking if the password fields match.

10
00:00:28,140 --> 00:00:33,090
Users can create an account without verifying their inputting the correct password.

11
00:00:33,600 --> 00:00:38,470
Secondly, it's possible an email can be taken if an email is taken.

12
00:00:38,490 --> 00:00:45,090
We should inform the user Firebase will reject a user's registration if an email is registered with

13
00:00:45,090 --> 00:00:45,630
our app.

14
00:00:46,020 --> 00:00:49,890
We aren't giving the user enough information to fix their mistake.

15
00:00:50,400 --> 00:00:54,090
We can't fix these issues with angular validator class.

16
00:00:54,420 --> 00:00:57,600
It does not come with functions for addressing these problems.

17
00:00:57,900 --> 00:01:01,770
In these cases, we will need to create custom validators.

18
00:01:02,070 --> 00:01:06,360
This entire section will be dedicated to developing custom validators.

19
00:01:06,900 --> 00:01:13,410
I chose not to talk about custom validators because we need to learn our SJS and Firebase first.

20
00:01:13,800 --> 00:01:18,210
Now that we've covered these two topics, we can come back to form validation.

21
00:01:18,570 --> 00:01:21,780
Knowledge of these topics will help tackle these problems.

22
00:01:22,020 --> 00:01:23,160
Let's get started.

23
00:01:23,670 --> 00:01:27,510
Custom validators can be defined as classes or functions.

24
00:01:27,720 --> 00:01:30,390
Both options are viable for this course.

25
00:01:30,420 --> 00:01:32,910
We will focus on class validators.

26
00:01:33,280 --> 00:01:36,300
Are much more common for our first validator.

27
00:01:36,450 --> 00:01:39,090
We are going to check if the passwords match.

28
00:01:40,230 --> 00:01:45,210
Let's discuss how we will design this validator throughout most of this course.

29
00:01:45,330 --> 00:01:48,720
We have been registering validators with form controls.

30
00:01:49,050 --> 00:01:53,520
Angular will supply validators with access to the form control.

31
00:01:53,790 --> 00:02:00,960
As a result, validators will have access to the value to perform validation during the development

32
00:02:00,960 --> 00:02:02,110
of this validator.

33
00:02:02,130 --> 00:02:07,320
We might attempt to add the validator to the confirm pass form control.

34
00:02:07,710 --> 00:02:14,550
This solution might seem like it'll work, but there's one problem we need access to the password form

35
00:02:14,550 --> 00:02:16,050
control for its value.

36
00:02:16,320 --> 00:02:19,650
Obtaining this value is possible but tricky.

37
00:02:20,040 --> 00:02:23,760
It's going to become challenging to design a validator like this.

38
00:02:24,060 --> 00:02:28,230
Luckily, there's an alternative way to add a validator to a form.

39
00:02:28,830 --> 00:02:31,380
We can add validators to form groups.

40
00:02:31,800 --> 00:02:37,410
By doing so, we will be given access to all form controls registered in a group.

41
00:02:37,710 --> 00:02:44,310
It's going to be much easier to design the validator that has access to the entire group whenever you're

42
00:02:44,310 --> 00:02:48,390
designing a validator that needs access to multiple controls.

43
00:02:48,630 --> 00:02:55,500
Consider designing it in a way that has access to the form group as opposed to assuming it'll be added

44
00:02:55,500 --> 00:02:57,300
to a single form control.

45
00:02:59,190 --> 00:03:03,720
Let's generate a class for our validator inside the command line.

46
00:03:03,810 --> 00:03:09,630
Run the following command Nji G class register of validators.

47
00:03:12,130 --> 00:03:19,240
I'm introducing a new sub command called Class, as the name suggests, this command will generate an

48
00:03:19,240 --> 00:03:20,660
empty class for us.

49
00:03:21,010 --> 00:03:22,720
Two files will be created.

50
00:03:23,050 --> 00:03:25,480
One of the files is a test file.

51
00:03:25,930 --> 00:03:28,000
We can safely ignore this file.

52
00:03:28,330 --> 00:03:31,210
Let's open the class file in our editor.

53
00:03:33,870 --> 00:03:37,830
By default, the Seelye will export the class for us.

54
00:03:38,100 --> 00:03:38,580
Great.

55
00:03:38,790 --> 00:03:41,370
We've got a class for writing our validator.

56
00:03:41,610 --> 00:03:44,910
Admittedly, we could have created the class ourselves.

57
00:03:45,090 --> 00:03:50,880
However, I think it's always good to know what the Seelye can offer in the next lecture.

58
00:03:51,030 --> 00:03:55,170
We will begin writing the logic for validating the password fields.