1
00:00:00,180 --> 00:00:05,670
In this lecture, we will start providing feedback to the user if their value is invalid.

2
00:00:05,970 --> 00:00:12,660
Currently, users have no idea how to fix their errors whenever they fill out a field incorrectly.

3
00:00:13,080 --> 00:00:16,350
Our error messages should be concise and helpful.

4
00:00:16,680 --> 00:00:21,720
Before we start rendering messages, we need to look at what we'll be dealing with.

5
00:00:22,410 --> 00:00:26,040
Errors can be accessed from their respective controllers.

6
00:00:26,370 --> 00:00:31,260
Angular will give us two options for accessing a controllers errors.

7
00:00:31,680 --> 00:00:33,570
Let's explore both options.

8
00:00:33,870 --> 00:00:37,080
Open the register component template file.

9
00:00:39,760 --> 00:00:45,040
We will long the errors for the name input fields below the input element.

10
00:00:45,250 --> 00:00:47,920
We will add a pair of paragraph tags.

11
00:00:50,420 --> 00:00:57,620
Inside these tags, let's add an expression, the expression will be the following register form dot

12
00:00:57,660 --> 00:00:59,000
control's name.

13
00:00:59,150 --> 00:01:00,060
Question mark.

14
00:01:00,110 --> 00:01:01,400
Dot errors.

15
00:01:03,830 --> 00:01:07,730
We can access our controls via the controls property.

16
00:01:08,060 --> 00:01:11,270
There is an alternative syntax you may see in the wild.

17
00:01:11,570 --> 00:01:17,990
Instead of typing controls dot name, we can replace this part of the code with the get function.

18
00:01:20,680 --> 00:01:25,090
They get function has one argument, which is the name of the controller.

19
00:01:25,420 --> 00:01:28,150
In this example, we can pass in name.

20
00:01:28,570 --> 00:01:35,770
The value returned by this function is the exact same object we were accessing from the controls object.

21
00:01:36,160 --> 00:01:38,140
Both syntax is are valid.

22
00:01:38,500 --> 00:01:43,090
I prefer accessing a controller via the controls object.

23
00:01:43,450 --> 00:01:45,370
I will revert this expression.

24
00:01:46,090 --> 00:01:50,680
The get function was introduced for more complex control paths.

25
00:01:51,040 --> 00:01:56,110
You may find it useful when you're designing large, complex input components.

26
00:01:56,470 --> 00:02:00,670
For our purposes, we won't be designing a complex component.

27
00:02:01,060 --> 00:02:05,620
Accessing the controller through the controls object will suffice.

28
00:02:06,370 --> 00:02:08,169
Back to the task at hand.

29
00:02:08,530 --> 00:02:11,410
Errors are stored under the errors property.

30
00:02:11,710 --> 00:02:14,440
The errors property will store an object.

31
00:02:14,680 --> 00:02:19,150
Since we're outputting an object, we should add the JSON pipe.

32
00:02:21,780 --> 00:02:25,710
You may be wondering, why did we end the optional training operator?

33
00:02:26,010 --> 00:02:31,410
It has to do with the value stored in the Air's object to better understand.

34
00:02:31,560 --> 00:02:34,050
Let's check out the object in the browser.

35
00:02:36,680 --> 00:02:44,390
Initially, the input will be invalid because it's empty, the required rule will break the errors,

36
00:02:44,390 --> 00:02:48,020
property will be an object of information on the air.

37
00:02:48,380 --> 00:02:53,390
The format for an error is the name of the rule broken as the property.

38
00:02:53,780 --> 00:02:56,660
The value will store additional information.

39
00:02:57,020 --> 00:03:01,280
In this case, the required property will be set to true.

40
00:03:01,670 --> 00:03:04,580
This value indicates the rule is broken.

41
00:03:05,240 --> 00:03:07,700
Let's try typing inside the input.

42
00:03:08,000 --> 00:03:14,990
If we type one character, the required rule will go away because the validation has passed.

43
00:03:15,290 --> 00:03:19,820
However, we get a completely different object this time.

44
00:03:20,000 --> 00:03:22,220
The minimum length rule is broken.

45
00:03:22,580 --> 00:03:24,770
The format for the rule is different.

46
00:03:25,070 --> 00:03:29,480
The error will tell us the minimum length and the current length of the value.

47
00:03:30,050 --> 00:03:35,360
If we type more than three characters, the errors property will be set to null.

48
00:03:35,750 --> 00:03:39,710
A no value indicates the input is completely valid.

49
00:03:40,220 --> 00:03:43,520
This is why we've added the optional chain operator.

50
00:03:43,850 --> 00:03:47,240
The JSON pie is expecting an object or array.

51
00:03:47,480 --> 00:03:49,670
It makes TypeScript unhappy.

52
00:03:50,300 --> 00:03:52,640
Errors can be challenging to deal with.

53
00:03:52,910 --> 00:03:55,430
There are various values to account for.

54
00:03:55,640 --> 00:03:58,700
We've only explored two validation functions.

55
00:03:59,270 --> 00:04:03,020
The other validation functions format their objects differently.

56
00:04:03,230 --> 00:04:08,630
We should always verify the structure of the errors object whenever trying a new rule.

57
00:04:09,140 --> 00:04:12,350
It's time to handle the error in the next lecture.

58
00:04:12,380 --> 00:04:15,650
We all output a friendlier message to the user.