1
00:00:00,120 --> 00:00:03,900
In this lecture, we were going to move on from the name field.

2
00:00:04,170 --> 00:00:07,110
It's time to start validating the other fields.

3
00:00:07,410 --> 00:00:12,180
This will lead us to learning about the other validator functions from angular.

4
00:00:12,480 --> 00:00:16,110
We will even create some along the way to get started.

5
00:00:16,140 --> 00:00:18,600
Open the register template file.

6
00:00:21,220 --> 00:00:24,790
After the name field, we have a field for the email.

7
00:00:25,090 --> 00:00:29,080
There are some special properties attached to the input element.

8
00:00:29,410 --> 00:00:33,490
Let's compare it to the input element from the input component.

9
00:00:33,970 --> 00:00:36,520
I'll open both template side by side.

10
00:00:38,150 --> 00:00:44,600
The classes are the same, and both elements where they differ are the type and placeholder attributes.

11
00:00:44,990 --> 00:00:50,780
The type for the email field is set to email in the input component template.

12
00:00:51,020 --> 00:00:53,810
The input element has a type of text.

13
00:00:54,290 --> 00:00:57,140
The placeholder attributes are different, too.

14
00:00:57,500 --> 00:01:00,980
We should make it possible to configure both attributes.

15
00:01:01,610 --> 00:01:04,940
I think this would be a good idea to add more inputs.

16
00:01:05,269 --> 00:01:07,280
These inputs should be optional.

17
00:01:07,820 --> 00:01:13,160
If the user doesn't supply a type will assume the type should be set to text.

18
00:01:13,520 --> 00:01:18,380
As for the placeholder, we'll initialize the input with an empty string.

19
00:01:18,770 --> 00:01:20,660
Placeholders will be optional.

20
00:01:20,930 --> 00:01:23,660
Open the input component class file.

21
00:01:26,300 --> 00:01:33,380
Inside the class, we will add a property called type, the type for this property will be string with

22
00:01:33,380 --> 00:01:35,480
a default value of text.

23
00:01:38,110 --> 00:01:45,220
The type attribute should have a default value if the parent component doesn't provide one by default,

24
00:01:45,460 --> 00:01:48,820
we will assume the input should be set to text.

25
00:01:49,180 --> 00:01:53,080
Next, we will add another property called placeholder.

26
00:01:53,470 --> 00:01:57,850
The type will be the same, but the default value will be an empty string.

27
00:02:00,550 --> 00:02:06,670
After adding these properties, we should find them in the template switch over to the input template

28
00:02:06,670 --> 00:02:09,070
file on the input element.

29
00:02:09,100 --> 00:02:15,280
We will bind the tape and placeholder attributes to their respective properties in the component.

30
00:02:17,840 --> 00:02:24,800
Both inputs will be optional, however, the purpose of adding these inputs was for the email field.

31
00:02:25,190 --> 00:02:30,770
Let's update the template in the register template to add values for these inputs.

32
00:02:31,100 --> 00:02:34,760
Scroll to the app input element for the name field.

33
00:02:35,150 --> 00:02:39,530
We aren't going to add the type property since it's the default type.

34
00:02:39,920 --> 00:02:43,040
However, we will add the placeholder property.

35
00:02:43,430 --> 00:02:46,520
The value will be the following Enter your name.

36
00:02:49,190 --> 00:02:49,670
Great.

37
00:02:49,970 --> 00:02:56,660
Let's load this component for the email field below this input, we will immediately find the email

38
00:02:56,660 --> 00:02:57,230
field.

39
00:02:57,530 --> 00:03:01,910
We can replace the input element with the app input element.

40
00:03:04,570 --> 00:03:08,560
The component is going to need the form control from the component.

41
00:03:08,860 --> 00:03:11,980
Let's bind the control property to email.

42
00:03:14,610 --> 00:03:20,490
The other properties don't need to be bound, the type property will be set to email.

43
00:03:22,980 --> 00:03:29,190
Lastly, the placeholder property will be set to the following message enter email.

44
00:03:31,710 --> 00:03:33,040
So far, so good.

45
00:03:33,450 --> 00:03:36,300
The only thing left is to validate the email.

46
00:03:36,570 --> 00:03:39,540
Open the register component class file.

47
00:03:42,090 --> 00:03:48,450
We are going to update the e-mail property, which contains an instance of the form control object,

48
00:03:48,900 --> 00:03:52,470
we can pass in an array to the constructor function.

49
00:03:52,830 --> 00:03:55,320
It's an array of validator functions.

50
00:03:55,590 --> 00:04:00,420
We will add two validator functions called required and email.

51
00:04:03,080 --> 00:04:06,740
We're already familiar with the required validator function.

52
00:04:07,100 --> 00:04:14,240
The email validator function is new to us in the resource section of this lecture, I provide a link

53
00:04:14,240 --> 00:04:18,260
to the documentation section for the email validator function.

54
00:04:20,820 --> 00:04:27,540
The documentation will give us all the information we'll need, the description tells us the requirements

55
00:04:27,540 --> 00:04:29,520
for satisfying the validator.

56
00:04:29,730 --> 00:04:35,040
The most important part of this section is the return value of the validator function.

57
00:04:35,490 --> 00:04:41,220
This information can be found under the usage section, according to the documentation.

58
00:04:41,370 --> 00:04:45,750
This function will return an object with a property called email.

59
00:04:46,080 --> 00:04:52,650
Its value will be true if the validation fails by consulting the documentation.

60
00:04:52,770 --> 00:05:00,360
We can skip outputting the error object to verify its properties and either gives us all the info will

61
00:05:00,360 --> 00:05:04,170
need for handling errors from its validator functions.

62
00:05:04,470 --> 00:05:06,480
Let's go back to our editors.

63
00:05:09,010 --> 00:05:11,990
We all need to handle the validation errors.

64
00:05:12,280 --> 00:05:18,460
Back in the input template file, we can skip adding a message for the required validation.

65
00:05:18,790 --> 00:05:22,570
Luckily for us, we've added a message in our previous lecture.

66
00:05:22,930 --> 00:05:26,380
That's the benefit of being able to reuse components.

67
00:05:26,650 --> 00:05:30,730
We can move straight along to handling the error for the email.

68
00:05:33,370 --> 00:05:41,770
Below the paragraph elements, we will add another paragraph element with a class of text read for hundred.

69
00:05:44,520 --> 00:05:48,630
The message will be the following you must enter a valid email.

70
00:05:51,130 --> 00:05:57,160
Lastly, we will add an energy if directive, the condition will be the following.

71
00:05:57,550 --> 00:06:00,280
Control Act airs question mark.

72
00:06:00,520 --> 00:06:01,420
Dot email.

73
00:06:03,900 --> 00:06:04,770
We're finished.

74
00:06:04,950 --> 00:06:07,890
Let's test the email input in the browser.

75
00:06:10,600 --> 00:06:17,680
Inside the field for the email, we will type in a single character and move away, an error message

76
00:06:17,680 --> 00:06:20,560
will tell us we must enter a valid email.

77
00:06:20,860 --> 00:06:23,560
I will attempt to type a valid email.

78
00:06:26,190 --> 00:06:26,850
Perfect.

79
00:06:27,090 --> 00:06:28,560
The air has gone away.

80
00:06:28,920 --> 00:06:31,680
We've successfully validated the email.

81
00:06:32,010 --> 00:06:36,120
We aren't adding rules for a minimum and maximum character length.

82
00:06:36,420 --> 00:06:43,410
The documentation says the email will have character limits imposed on the value that saves us a lot

83
00:06:43,410 --> 00:06:45,510
of time in the next lecture.

84
00:06:45,660 --> 00:06:48,600
We will begin validating the other fields.