1
00:00:00,150 --> 00:00:07,040
In this lecture, we were going to validate the next field in our form, in the register template file

2
00:00:07,050 --> 00:00:11,520
the field after the email is the age field unlike before.

3
00:00:11,640 --> 00:00:14,060
We aren't going to be dealing with a string.

4
00:00:14,370 --> 00:00:16,560
We will need to validate a number.

5
00:00:16,950 --> 00:00:20,220
It's going to require a different set of validators.

6
00:00:20,460 --> 00:00:21,510
Let's get started.

7
00:00:22,080 --> 00:00:24,900
Open the register a component in your editor.

8
00:00:27,350 --> 00:00:32,930
Search for the input for the age, it can be found directly below the email field.

9
00:00:33,290 --> 00:00:38,600
First things first, we will replace the input element with the input component.

10
00:00:41,220 --> 00:00:45,180
The control property should be bound to its respective control.

11
00:00:45,480 --> 00:00:47,880
We will bind it to the age property.

12
00:00:50,420 --> 00:00:53,180
The tight property will be set to no.

13
00:00:55,680 --> 00:00:58,830
The number type is a special type by the browser.

14
00:00:59,160 --> 00:01:05,820
It'll prevent the user from typing alphabetic or special characters, the input will be restricted to

15
00:01:05,820 --> 00:01:09,330
numbers that makes our lives incredibly easier.

16
00:01:09,630 --> 00:01:12,610
Next, we will add the placeholder property.

17
00:01:12,970 --> 00:01:16,350
It'll be set to the following message Enter age.

18
00:01:18,860 --> 00:01:20,600
We're finished with the template.

19
00:01:20,870 --> 00:01:26,360
Let's begin adding validators open the register component class file.

20
00:01:28,830 --> 00:01:35,640
Search for the age property, an array of validators will be passed as the second argument to the new

21
00:01:35,640 --> 00:01:38,190
instance of the form control class.

22
00:01:38,550 --> 00:01:42,170
We will start by adding the required validator function.

23
00:01:44,870 --> 00:01:47,780
The age should be required before signing up.

24
00:01:48,050 --> 00:01:51,260
Next, we will add a validator called minimum.

25
00:01:53,970 --> 00:01:59,820
The minimum validator function is completely different from the minimum length validator function.

26
00:02:00,300 --> 00:02:03,120
This validator function will validate numbers.

27
00:02:03,360 --> 00:02:05,460
It doesn't check the character length.

28
00:02:05,790 --> 00:02:10,860
We need to work with raw numbers if we want to set a minimum threshold.

29
00:02:10,979 --> 00:02:12,810
This validator will help us.

30
00:02:13,110 --> 00:02:16,980
It has one argument, which is a number we will pass in.

31
00:02:16,980 --> 00:02:17,760
18.

32
00:02:20,330 --> 00:02:24,530
We don't want users under the age of 18 signing up next.

33
00:02:24,680 --> 00:02:27,050
Let's set a maximum threshold.

34
00:02:27,380 --> 00:02:30,680
We don't want users over the age of 120.

35
00:02:30,980 --> 00:02:35,690
We can add a maximum threshold by adding the maximum validator function.

36
00:02:38,260 --> 00:02:40,150
We will pass in 120.

37
00:02:42,750 --> 00:02:45,600
Most people aren't over the age of 120.

38
00:02:45,990 --> 00:02:49,050
Feel free to adjust this value to whatever you like.

39
00:02:49,320 --> 00:02:53,370
Realistically, it doesn't matter if users are older than 120.

40
00:02:53,670 --> 00:02:58,590
However, we will have this validator to control, for example, purposes.

41
00:02:59,100 --> 00:03:05,130
The last step in this process is to handle rendering error messages before we do.

42
00:03:05,340 --> 00:03:11,400
It's always a good idea to check the value returned by the validator functions when an error occurs.

43
00:03:11,760 --> 00:03:18,750
In the resource section of this lecture, I provide a link to the Minimum Validator Function Documentation

44
00:03:18,750 --> 00:03:19,350
page.

45
00:03:21,960 --> 00:03:28,170
According to the documentation page, the error will be an object with a property called minimum.

46
00:03:28,440 --> 00:03:30,120
It'll have two properties.

47
00:03:30,270 --> 00:03:33,570
The current number and the required minimum value.

48
00:03:33,900 --> 00:03:36,930
Let's move on to the maximum validator function.

49
00:03:37,320 --> 00:03:39,210
It's directly under this function.

50
00:03:39,990 --> 00:03:43,290
The documentation tells us the error will be an object.

51
00:03:43,600 --> 00:03:46,860
It'll have similar properties to the minimum object.

52
00:03:47,280 --> 00:03:52,380
For example, it'll tell us the current value and required maximum value.

53
00:03:52,770 --> 00:03:57,480
Now that we have an idea of what to expect, let's begin handling the error.

54
00:03:57,900 --> 00:03:59,220
Go back to the editor.

55
00:03:59,550 --> 00:04:03,180
We are going to be working inside the input template file.

56
00:04:05,660 --> 00:04:12,320
At the bottom of the energy container element, we will add a paragraph element with the class of text

57
00:04:12,320 --> 00:04:13,550
read four hundred.

58
00:04:16,279 --> 00:04:21,470
Inside this element, we will add the following message value to low.

59
00:04:24,080 --> 00:04:31,220
Next, we will add the NGF directive to check if we should render this message, the condition will

60
00:04:31,220 --> 00:04:32,120
be the following.

61
00:04:32,450 --> 00:04:35,060
Control errors question mark.

62
00:04:35,090 --> 00:04:36,110
Dot min.

63
00:04:38,700 --> 00:04:39,870
We're almost finished.

64
00:04:40,050 --> 00:04:43,920
We need to handle the error from the maximum validator function.

65
00:04:44,310 --> 00:04:46,950
The message will be similar to the minimum error.

66
00:04:47,340 --> 00:04:50,130
Let's make a copy of this paragraph element.

67
00:04:52,710 --> 00:04:57,330
The condition will check for the Max property inside of the main property.

68
00:04:59,740 --> 00:05:03,970
Lastly, the message will say the following value to high.

69
00:05:06,540 --> 00:05:07,440
That should do it.

70
00:05:07,650 --> 00:05:10,130
Let's test the age field in the browser.

71
00:05:12,650 --> 00:05:16,370
If we Typekit number below 18, an error will pop up.

72
00:05:16,670 --> 00:05:18,860
It's telling us the number is too low.

73
00:05:19,250 --> 00:05:22,730
Vice versa, if type of number above 120.

74
00:05:22,940 --> 00:05:25,910
The error message will tell us the number is too high.

75
00:05:26,240 --> 00:05:31,010
If we type anything in between these two thresholds, the field is valid.

76
00:05:31,340 --> 00:05:31,970
Perfect.

77
00:05:32,150 --> 00:05:39,500
We've successfully validated the age we learned about two validator functions for testing numbers instead

78
00:05:39,500 --> 00:05:41,360
of a character length of a string.

79
00:05:41,750 --> 00:05:45,590
These functions may look the same, but serve different purposes.

80
00:05:45,920 --> 00:05:52,910
It's always good to read the documentation to verify how the validator functions work in the next lecture.

81
00:05:52,970 --> 00:05:56,150
We will start validating the password fields.