1
00:00:00,120 --> 00:00:05,850
In this lecture, we are going to validate inputs with regular expressions, handling passwords is not

2
00:00:05,850 --> 00:00:07,350
something we should take lightly.

3
00:00:07,620 --> 00:00:10,410
We need to be extremely careful with a user's password.

4
00:00:10,710 --> 00:00:15,150
We can help users keep their accounts secure by suggesting a strong password.

5
00:00:15,480 --> 00:00:21,540
Regular expressions are the most common method to check if a password is strong out of the box.

6
00:00:21,790 --> 00:00:26,550
Angular ships a validator for running an inputs value against a regular expression.

7
00:00:26,880 --> 00:00:31,560
We are going to apply this validator to our password fields to get started.

8
00:00:31,800 --> 00:00:33,990
Open the register template file.

9
00:00:36,570 --> 00:00:42,120
Inside the template, we have two password fields, one field for storing the password.

10
00:00:42,420 --> 00:00:44,730
Another field for verifying the password.

11
00:00:45,090 --> 00:00:49,830
The password confirmation field will require a different set of validation rules.

12
00:00:50,220 --> 00:00:55,410
There are topics we will need to discuss before validating the password confirmation field.

13
00:00:55,740 --> 00:01:00,300
For this reason, we are going to keep the validation rules for this field simple.

14
00:01:00,960 --> 00:01:04,890
Let's replace the input elements with the app input component.

15
00:01:09,780 --> 00:01:15,990
On the first input element, we will bind the control property to the password form control.

16
00:01:18,500 --> 00:01:21,230
The type property will be set to password.

17
00:01:24,750 --> 00:01:29,490
The placeholder property will be set to the following message enter password.

18
00:01:32,080 --> 00:01:34,810
Let's move on to the second input component.

19
00:01:35,080 --> 00:01:39,850
The control property will be bound to the confirm password form control.

20
00:01:42,440 --> 00:01:45,110
The type property will be set to password.

21
00:01:47,650 --> 00:01:53,110
Lastly, the placeholder property will have the following message confirm password.

22
00:01:55,930 --> 00:01:57,250
Our components are ready.

23
00:01:57,400 --> 00:02:04,240
We can begin adding validator functions to the form controls, open the register component class file.

24
00:02:06,790 --> 00:02:13,900
We are going to modify the password form control by passing in an array of validators to validator should

25
00:02:13,900 --> 00:02:15,370
be applying to this control.

26
00:02:15,700 --> 00:02:18,190
They're called required and pattern.

27
00:02:20,740 --> 00:02:26,890
The pattern validator is new to us in the resource section of this lecture, I provide a link to this

28
00:02:26,890 --> 00:02:28,060
validator function.

29
00:02:30,550 --> 00:02:36,610
This validator will check our input against a regular expression, the regular expression can be anything

30
00:02:36,610 --> 00:02:37,150
we want.

31
00:02:37,480 --> 00:02:42,220
The documentation has some extra information that isn't important to us at the moment.

32
00:02:42,550 --> 00:02:48,980
If we scroll to the usage notes, we'll be given an example of an error object for this demonstration.

33
00:02:49,000 --> 00:02:50,530
We won't mean this object.

34
00:02:50,800 --> 00:02:55,960
However, it's still good to know what sort of error gets produced by the validator function.

35
00:02:56,530 --> 00:02:59,080
Regular expressions can be difficult to write.

36
00:02:59,410 --> 00:03:01,450
The syntax for them is tough to read.

37
00:03:01,750 --> 00:03:08,500
Luckily, there's a tool online for helping us debug a regular expression in the resource section of

38
00:03:08,500 --> 00:03:09,310
this lecture.

39
00:03:09,460 --> 00:03:11,320
I provide a link to this tool.

40
00:03:11,830 --> 00:03:14,740
It's a tool for breaking down regular expressions.

41
00:03:14,980 --> 00:03:21,340
If you're unsure how a regular expression works, it's a great tool for playing around with them on

42
00:03:21,340 --> 00:03:22,150
the sidebar.

43
00:03:22,210 --> 00:03:26,140
We can search through regular expressions submitted by the community.

44
00:03:26,410 --> 00:03:28,720
Let's search for a password expression.

45
00:03:31,210 --> 00:03:33,230
The first result is highly rated.

46
00:03:33,490 --> 00:03:38,380
We should use it if we click on it will be given the expression along with a note.

47
00:03:38,710 --> 00:03:44,260
The note says the expression will check if the character length is at least eight characters has at

48
00:03:44,260 --> 00:03:48,670
least one uppercase letter, one lowercase letter and one number.

49
00:03:48,940 --> 00:03:50,470
I think this is a good start.

50
00:03:50,710 --> 00:03:52,810
Let's copy the entire expression.

51
00:03:55,420 --> 00:03:59,140
Back in the ED, we will paste it into the pattern function.

52
00:04:01,720 --> 00:04:04,750
We aren't going to add on the regular expression.

53
00:04:04,930 --> 00:04:08,950
It's perfect, as is, before we start working on an error message.

54
00:04:09,130 --> 00:04:15,130
We will validate be password confirmation fields add an array to the form control object.

55
00:04:17,690 --> 00:04:20,360
We are going to add the required validator.

56
00:04:22,860 --> 00:04:25,530
This field should match with the password field.

57
00:04:25,770 --> 00:04:31,080
However, there are other topics we need to dive into before validating this field.

58
00:04:31,380 --> 00:04:33,720
We will come back to it in a future section.

59
00:04:34,020 --> 00:04:37,170
For now, the required validator will work.

60
00:04:37,470 --> 00:04:40,080
Let's start creating some error messages.

61
00:04:40,260 --> 00:04:42,390
Open the input template file.

62
00:04:44,850 --> 00:04:51,680
At the top of the kng container element, we will add a paragraph element with the text read for Hunter

63
00:04:51,690 --> 00:04:52,260
Class.

64
00:04:54,590 --> 00:05:01,200
Next, we will add the NGF directive with the following expression control errors.

65
00:05:01,220 --> 00:05:03,140
Question mark dot pattern.

66
00:05:05,660 --> 00:05:09,440
If this air gets triggered, we will output the following message.

67
00:05:09,770 --> 00:05:15,950
Passwords must be at least eight characters long have one uppercase letter, one lowercase letter and

68
00:05:15,950 --> 00:05:16,730
one number.

69
00:05:21,670 --> 00:05:27,970
Unfortunately, we aren't going to be told which part of the regular expression was broken, therefore

70
00:05:27,970 --> 00:05:31,810
we'll output the entire list of possible errors with the input.

71
00:05:32,140 --> 00:05:34,600
Let's test the validation in the browser.

72
00:05:37,110 --> 00:05:43,200
If we type in the password field, we will get an air until the regular expression test passes.

73
00:05:43,530 --> 00:05:45,780
I'm going to type in a valid password.

74
00:05:47,170 --> 00:05:52,930
With the help of regular expressions, we can assist users with creating robust passwords.

75
00:05:53,230 --> 00:05:55,330
We're almost finished validating the form.

76
00:05:55,540 --> 00:05:57,160
We have a few more fields.

77
00:05:57,430 --> 00:05:59,560
Let's finish them in the next lecture.