1
00:00:00,120 --> 00:00:04,620
In this lecture, we were going to be performing form validation on our form.

2
00:00:05,100 --> 00:00:09,690
Validation is the process of checking if a value is in the correct format.

3
00:00:09,960 --> 00:00:17,220
For example, if we ask the user for an email, the email should contain the at symbol and domain if

4
00:00:17,220 --> 00:00:19,620
a value does not pass a set of rules.

5
00:00:19,800 --> 00:00:21,420
It is considered invalid.

6
00:00:21,960 --> 00:00:24,990
Validation is necessary for almost any form.

7
00:00:25,230 --> 00:00:31,500
We can use reactive forms to perform validation on the client side, which saves users from waiting

8
00:00:31,500 --> 00:00:33,330
for our response from the server.

9
00:00:33,660 --> 00:00:36,270
They'll be able to receive immediate feedback.

10
00:00:36,720 --> 00:00:41,460
We'll want to ensure every input in the form contains valid values.

11
00:00:41,940 --> 00:00:44,730
Angular comes with validators out of the box.

12
00:00:45,030 --> 00:00:49,470
Validators are functions that will check a value against some rules.

13
00:00:49,800 --> 00:00:55,740
A Boolean value is returned based on whether the inputs value passes, the validators rules.

14
00:00:56,370 --> 00:00:58,540
We will start with the name field.

15
00:00:58,890 --> 00:01:01,710
Open the register component class file.

16
00:01:04,300 --> 00:01:13,030
Anglers validator functions can be found under the angular forms package from the Angular Forms package.

17
00:01:13,180 --> 00:01:15,670
We will add the validators object.

18
00:01:18,390 --> 00:01:25,050
Every validation function can be found under this object in the resource section of this lecture, I

19
00:01:25,050 --> 00:01:29,550
provide a link to an official list of validation functions from Angular.

20
00:01:32,100 --> 00:01:35,880
We will be exploring most of these validators throughout this course.

21
00:01:36,150 --> 00:01:42,030
The two validators we're interested in are the men and required validator functions.

22
00:01:42,300 --> 00:01:43,620
Let's give them a try.

23
00:01:43,830 --> 00:01:45,510
Switch back to the editor.

24
00:01:48,080 --> 00:01:54,770
We can apply validators to controllers in the new instances of the form control object.

25
00:01:55,010 --> 00:01:58,130
There are additional optional arguments we can add.

26
00:01:58,520 --> 00:02:05,600
The second argument is an array of validator functions to run the value through let's pass in an array.

27
00:02:08,320 --> 00:02:13,210
The first function we will pass in is the validators dot required function.

28
00:02:15,810 --> 00:02:19,860
The required validator will check if the value has a value.

29
00:02:20,130 --> 00:02:24,570
It will not allow a no undefined or empty string value.

30
00:02:24,930 --> 00:02:27,330
This validator will force a value.

31
00:02:27,630 --> 00:02:31,410
Otherwise, the user will not be able to submit the form.

32
00:02:31,770 --> 00:02:36,120
Let's add another validators called validators dot mid-length.

33
00:02:38,730 --> 00:02:45,180
The mid-length function will check if a string meets the minimum length of characters, most names are

34
00:02:45,180 --> 00:02:47,040
longer than three characters.

35
00:02:47,340 --> 00:02:52,380
We should make sure the user is inputting a name longer than three characters.

36
00:02:52,740 --> 00:02:56,760
We can configure the length by passing in a number to this function.

37
00:02:57,120 --> 00:02:59,220
We will pass in the number three.

38
00:03:01,990 --> 00:03:08,500
The minimum length function is not to be confused with the minimum function, Angular has two functions

39
00:03:08,500 --> 00:03:15,430
for handling the length of a value the minimum length function handle strings, whereas the minimum

40
00:03:15,430 --> 00:03:17,380
function handles numbers.

41
00:03:17,920 --> 00:03:23,050
These functions will automatically be called by angular whenever the input changes.

42
00:03:23,410 --> 00:03:28,180
Some validator functions have optional arguments for further configuration.

43
00:03:28,570 --> 00:03:33,340
You can consult the documentation for the arguments of a validator function.

44
00:03:33,760 --> 00:03:37,120
We will be exploring more rules throughout this section.

45
00:03:37,420 --> 00:03:41,980
For now, we are going to limit the name field to these two rules.

46
00:03:42,460 --> 00:03:44,050
Let's refresh the page.

47
00:03:46,730 --> 00:03:48,500
Open the developer tools.

48
00:03:48,800 --> 00:03:53,390
Let's check out the status property on the register form object.

49
00:03:53,660 --> 00:03:56,390
You can find it under the register component.

50
00:03:58,990 --> 00:04:06,280
Unlike before, the saddest property will be set to invalid, Angular will automatically enforce our

51
00:04:06,280 --> 00:04:08,650
rules when the component gets loaded.

52
00:04:08,980 --> 00:04:13,630
Let's try typing inside the name field with a single character.

53
00:04:16,230 --> 00:04:19,200
After doing so, the field remains invalid.

54
00:04:19,500 --> 00:04:23,490
It isn't until we've satisfied the requirements of the rules.

55
00:04:23,820 --> 00:04:29,580
After typing in more than three characters, these status property has changed to valid.

56
00:04:30,030 --> 00:04:36,990
Keep in mind that this property will tell us if the entire form is valid if another field had invalid

57
00:04:36,990 --> 00:04:37,820
values.

58
00:04:37,920 --> 00:04:44,760
This property would remain invalid if we want to check the validity of a specific control.

59
00:04:44,850 --> 00:04:47,760
We need to look inside the controls object.

60
00:04:48,090 --> 00:04:53,820
The controls object contains a list of the controllers registered under the form group.

61
00:04:54,150 --> 00:04:59,070
Inside the name controller, we will find a property called status.

62
00:05:01,540 --> 00:05:09,370
As we can see, the status property is set to valid, angular gives us plenty of information for verifying

63
00:05:09,370 --> 00:05:10,210
our forms.

64
00:05:10,480 --> 00:05:14,450
We should start handling errors before we get two errors.

65
00:05:14,470 --> 00:05:16,390
I want to mention one more thing.

66
00:05:16,720 --> 00:05:19,690
Validators can be detected from our template.

67
00:05:19,990 --> 00:05:23,200
Some of them support HTML5 attributes.

68
00:05:23,440 --> 00:05:27,730
Back in the editor, open the register a component template file.

69
00:05:30,340 --> 00:05:37,150
On the input element for the name, we can add HTML five attributes for validating inputs.

70
00:05:37,480 --> 00:05:42,430
Angular will override the behavior of the browser's validation mechanism.

71
00:05:42,760 --> 00:05:45,280
It will handle validating the input.

72
00:05:45,670 --> 00:05:49,090
Not all HTML five attributes are supported.

73
00:05:49,360 --> 00:05:53,680
The documentation will tell you which attributes it can handle.

74
00:05:54,280 --> 00:06:00,760
The minimum length validator function can be added as an attribute on the input element.

75
00:06:01,060 --> 00:06:03,700
We will add the mean length attribute.

76
00:06:03,970 --> 00:06:05,620
Its value will be three.

77
00:06:08,280 --> 00:06:14,910
Back in the component class file, we can remove the minimum length validator function from the array.

78
00:06:17,650 --> 00:06:23,130
Angular will automatically run our value through the minimum length validator function.

79
00:06:23,920 --> 00:06:29,800
It'll detect the attribute on the input and run the value through the appropriate validator.

80
00:06:30,130 --> 00:06:31,990
Let's try testing the form.

81
00:06:34,700 --> 00:06:39,800
If we type a single character into the input, the form should be invalid.

82
00:06:40,070 --> 00:06:44,330
We can verify the validity of the form through the dev tools.

83
00:06:46,800 --> 00:06:52,620
In most cases, you will usually add your validation rules in the class or template.

84
00:06:52,950 --> 00:06:55,230
It's not common to have them separate.

85
00:06:55,620 --> 00:07:01,590
I'm going to leave the minimum length attribute on the input element for demonstration purposes.

86
00:07:01,890 --> 00:07:08,760
It's great that angular gives us flexibility with where we can add validation rules in the next lecture.

87
00:07:08,790 --> 00:07:10,920
We will start handling errors.