1 00:00:00,390 --> 00:00:06,780 In this lecture, we are going to output a friendlier message to the user if their input is invalid 2 00:00:07,110 --> 00:00:09,960 or able to validate the input successfully. 3 00:00:10,350 --> 00:00:14,040 The error message isn't the most magnificent thing in the world. 4 00:00:14,340 --> 00:00:20,100 We will want to provide friendlier feedback to the user when it comes to handling feedback. 5 00:00:20,310 --> 00:00:24,180 Angular expects us to handle outputting error messages. 6 00:00:24,480 --> 00:00:28,140 It will not generate a message for us to get started. 7 00:00:28,350 --> 00:00:30,870 Open the register template file. 8 00:00:33,460 --> 00:00:36,670 We are going to be displaying an error for every rule. 9 00:00:36,880 --> 00:00:43,960 We will start with the required rule on the paragraph element, which is below the input element for 10 00:00:43,960 --> 00:00:44,560 the name. 11 00:00:44,680 --> 00:00:47,590 We will add an NGF directive. 12 00:00:50,220 --> 00:00:58,080 The condition will be the following register form controls dot name DOT airs question mark. 13 00:00:58,170 --> 00:00:59,370 Dot required. 14 00:01:01,910 --> 00:01:05,269 We are adding optional chaining to the errors property. 15 00:01:05,540 --> 00:01:13,070 It could potentially be set, you know, if it is angular, will interpret a no value as a false value 16 00:01:13,400 --> 00:01:14,900 without the optional chain. 17 00:01:14,930 --> 00:01:17,240 Operator, we may receive an error. 18 00:01:17,630 --> 00:01:23,510 It's because JavaScript will attempt to access the required property on a no value. 19 00:01:23,960 --> 00:01:30,560 Optional chaining will prevent an undefined error from being thrown for every message we add. 20 00:01:30,620 --> 00:01:33,170 We should always check if the rule was broken. 21 00:01:33,530 --> 00:01:37,760 We don't want to render error messages if the validation passes. 22 00:01:38,090 --> 00:01:40,730 Otherwise, we may confuse the user. 23 00:01:41,030 --> 00:01:46,670 If there is an error, let's send a friendly message inside the paragraph elements. 24 00:01:46,850 --> 00:01:52,220 We will replace the expression with the following message field is required. 25 00:01:54,910 --> 00:01:59,890 One last thing we will add a class called text read 400. 26 00:02:02,490 --> 00:02:05,730 This color should help the user identify the error. 27 00:02:06,030 --> 00:02:09,840 Typically, red is a color associated with errors. 28 00:02:10,080 --> 00:02:13,230 We have two rules on the input for the name. 29 00:02:13,500 --> 00:02:15,300 We've handled the first rule. 30 00:02:15,600 --> 00:02:19,500 The other validation rule was the minimum length validation. 31 00:02:19,860 --> 00:02:25,590 This validation function will require new value to have a minimum length of characters. 32 00:02:26,070 --> 00:02:30,750 We should output an error to tell the user their input needs to be longer. 33 00:02:31,110 --> 00:02:37,500 The template for handling this error message will be similar to the template for the required validation 34 00:02:37,500 --> 00:02:38,040 function. 35 00:02:38,460 --> 00:02:41,310 We can make a copy of the paragraph tag. 36 00:02:43,870 --> 00:02:49,090 Instead of checking the required property, we will check the min length property. 37 00:02:51,700 --> 00:02:58,060 This might sound strange, but make sure it the letter L is lowercase in the controls object. 38 00:02:58,270 --> 00:03:01,570 The word mid-length is all lowercase letters. 39 00:03:01,810 --> 00:03:06,070 However, in our class, the same function has a capital L.. 40 00:03:06,430 --> 00:03:08,500 It's a bizarre inconsistency. 41 00:03:08,830 --> 00:03:12,910 It can be easy to overlook after updating the condition. 42 00:03:13,060 --> 00:03:15,040 We can move on to the message. 43 00:03:15,310 --> 00:03:20,740 The message will be the following the value you inputted is blank characters long. 44 00:03:23,400 --> 00:03:26,430 We need to replace the word blank with an expression. 45 00:03:26,790 --> 00:03:31,320 The minimum length function will return an object with two properties. 46 00:03:31,650 --> 00:03:34,500 The first property is called actual length. 47 00:03:34,890 --> 00:03:37,530 It will contain the current length of the input. 48 00:03:37,950 --> 00:03:44,220 We will replace the placeholder with the following expression register form dot controls. 49 00:03:44,220 --> 00:03:46,380 Dot name dot errors. 50 00:03:46,470 --> 00:03:47,460 Question mark. 51 00:03:47,470 --> 00:03:47,980 Dot. 52 00:03:48,000 --> 00:03:48,960 Actual length. 53 00:03:54,920 --> 00:04:00,680 Next, we need to tell our users the minimum length, we will add the following message. 54 00:04:00,920 --> 00:04:03,980 It must be at least blank characters long. 55 00:04:06,690 --> 00:04:13,560 The expression for the placeholder will be the following register form dot control's dot name. 56 00:04:13,560 --> 00:04:15,570 Dot errors question mark. 57 00:04:15,690 --> 00:04:17,290 Dot required length. 58 00:04:19,930 --> 00:04:26,500 These two properties will help us generate a message to let the user know how to satisfy the validator 59 00:04:26,830 --> 00:04:28,480 after making those changes. 60 00:04:28,630 --> 00:04:30,070 Let's test our form. 61 00:04:32,650 --> 00:04:39,670 Immediately, we will see the error message from the required validator, the minimum length validator 62 00:04:39,670 --> 00:04:42,820 does not run on inputs with a length of zero. 63 00:04:43,240 --> 00:04:49,330 For this reason, we won't see an error message appear alongside the required validator. 64 00:04:49,870 --> 00:04:55,330 If we type a single character, the first error message disappears in its place. 65 00:04:55,570 --> 00:04:58,810 The minimum length validator will return in error. 66 00:04:59,080 --> 00:05:03,700 Lastly, if we type more than three characters, the message goes away. 67 00:05:03,910 --> 00:05:06,400 We have a completely valid input. 68 00:05:06,970 --> 00:05:10,660 The error messages are almost perfect in the next lecture. 69 00:05:10,780 --> 00:05:16,300 We will make one more change to our error message to improve user experience.