1
00:00:00,120 --> 00:00:06,180
In this lecture, we are going to start adding validation to our forms, adding validation to a template

2
00:00:06,180 --> 00:00:07,260
form is simple.

3
00:00:07,470 --> 00:00:11,490
We add our validation rolls through all five attributes.

4
00:00:11,730 --> 00:00:17,610
In the resource section of this lecture, I provide a link to a page called constraint validation.

5
00:00:18,480 --> 00:00:24,900
This page goes over how to validate forms with a simple browsers can perform validation on their own.

6
00:00:25,260 --> 00:00:30,990
If we're using template forms, Angular will hook into this process to validate forms internally.

7
00:00:31,650 --> 00:00:35,670
If we scroll down, the page will come across a table of attributes.

8
00:00:35,910 --> 00:00:38,910
We can apply these attributes to our inputs.

9
00:00:39,240 --> 00:00:42,090
Angular will be able to validate the form with them.

10
00:00:42,360 --> 00:00:43,560
Let's give it a try.

11
00:00:44,070 --> 00:00:47,730
We are going to add to validation rules to the email field.

12
00:00:47,970 --> 00:00:51,960
We should make it required and check if the email is in a valid format.

13
00:00:52,650 --> 00:00:56,350
We will need to use a regular expression for validating an email.

14
00:00:56,610 --> 00:01:00,690
H.M. does not come with a validator for this type of situation.

15
00:01:01,230 --> 00:01:05,640
Fortunately, we're aware of a tool for helping us with regular expressions.

16
00:01:05,880 --> 00:01:08,760
Let's navigate to the regular expression tool.

17
00:01:11,290 --> 00:01:19,000
On the sidebar, we are going to click on the IOC 28 22 email validation, regular expression if it's

18
00:01:19,000 --> 00:01:19,730
not there.

19
00:01:19,750 --> 00:01:20,620
Search for it.

20
00:01:20,920 --> 00:01:24,100
It's the most popular regular expression on this site.

21
00:01:24,430 --> 00:01:27,850
According to the description, it will validate in email.

22
00:01:28,090 --> 00:01:29,980
It's perfect for our situation.

23
00:01:30,310 --> 00:01:32,050
Copy the irregular expression.

24
00:01:32,290 --> 00:01:37,570
Be sure not to copy the forward slash characters or the letter G at the end.

25
00:01:40,120 --> 00:01:43,240
Next, let's open the login template file.

26
00:01:45,700 --> 00:01:49,630
On the input for the email and the required attributes.

27
00:01:52,110 --> 00:01:54,120
We want the email to be required.

28
00:01:54,390 --> 00:02:00,360
Behind the scenes, Angular will override the default behavior of the browser by running the value through

29
00:02:00,360 --> 00:02:02,790
the validators dot required function.

30
00:02:03,150 --> 00:02:05,310
It's a function we're very familiar with.

31
00:02:05,640 --> 00:02:09,449
We frequently use this validator with the registration form.

32
00:02:10,050 --> 00:02:12,000
Let's move on to adding a pattern.

33
00:02:12,330 --> 00:02:17,070
We can add a regular expression to an input by adding the pattern attribute.

34
00:02:17,430 --> 00:02:21,960
The value for this attribute will be the regular expression we copied earlier.

35
00:02:24,500 --> 00:02:30,440
Like before, Angular will override the browser's default behavior by running the value through the

36
00:02:30,440 --> 00:02:32,630
validators dot pattern function.

37
00:02:32,900 --> 00:02:34,160
We should be good to go.

38
00:02:34,400 --> 00:02:36,440
Let's test our form in the browser.

39
00:02:38,940 --> 00:02:44,230
Under the form, the entire group is invalid because the email does not have a value.

40
00:02:44,490 --> 00:02:47,700
Let's try providing the input a valid value.

41
00:02:50,230 --> 00:02:56,860
After typing a valid value, our form is considered valid, we use successfully validated the email

42
00:02:56,860 --> 00:03:00,490
field, adding validation to a form is dead simple.

43
00:03:00,730 --> 00:03:04,780
We can add HTML five attributes to the input element.

44
00:03:05,140 --> 00:03:07,450
Angular will be able to pick up on them.

45
00:03:07,670 --> 00:03:09,970
It'll override the default behavior.

46
00:03:10,420 --> 00:03:14,080
The form group will be able to store the current status of the form.

47
00:03:14,320 --> 00:03:18,190
We can continue to check them to verify the validity of the form.

48
00:03:18,430 --> 00:03:22,900
In the next lecture, we should start rendering friendlier messages to the user.

49
00:03:23,020 --> 00:03:23,830
See you there!