1 00:00:00,360 --> 00:00:06,090 In this lecture, we are going to improve the user experience of our forum at the moment. 2 00:00:06,240 --> 00:00:09,450 The error messages will appear instantaneously. 3 00:00:09,720 --> 00:00:14,160 I have the form opened in my browser without touching a single field. 4 00:00:14,370 --> 00:00:17,790 The error from the required validator will appear. 5 00:00:18,060 --> 00:00:19,200 It's sort of annoying. 6 00:00:19,650 --> 00:00:24,930 We don't want to annoy our users with error messages when they haven't had a chance to fill out the 7 00:00:24,930 --> 00:00:25,440 form. 8 00:00:25,740 --> 00:00:32,640 Error messages should be presented after typing inside the input field anglers reactive form. 9 00:00:32,640 --> 00:00:35,550 This feature can help us detect actions on the field. 10 00:00:35,850 --> 00:00:41,700 In the resource section of this lecture, I provide a link to the abstract control class. 11 00:00:44,140 --> 00:00:51,190 Strangely, I'm not providing a link to the form control class, the abstract control class is the parent 12 00:00:51,190 --> 00:00:53,470 class of the form control class. 13 00:00:53,800 --> 00:01:00,340 In some cases, you may not find the information you're looking for in a specific classes documentation 14 00:01:00,700 --> 00:01:02,470 to find what you're looking for. 15 00:01:02,650 --> 00:01:06,400 You may need to check if the class inherits another class. 16 00:01:07,000 --> 00:01:12,850 The abstract control class has the documentation for the properties we're about to use. 17 00:01:13,150 --> 00:01:18,010 If we scroll down this page, we will find a section called subclasses. 18 00:01:18,400 --> 00:01:25,750 According to the documentation, the form control and form group classes are subclasses of the abstract 19 00:01:25,750 --> 00:01:26,800 control class. 20 00:01:27,220 --> 00:01:32,080 Properties and methods under this class can be found in our controllers and groups. 21 00:01:32,650 --> 00:01:36,050 The information on this page is relative to what we need. 22 00:01:36,370 --> 00:01:38,770 Scroll down to the properties section. 23 00:01:41,330 --> 00:01:47,720 From this list of properties, there are various properties for helping us detect various interactions 24 00:01:47,720 --> 00:01:48,650 on an input. 25 00:01:49,010 --> 00:01:53,540 For example, there's a property for when an input has been touched. 26 00:01:53,870 --> 00:01:58,400 We can use them to help us change the behavior of our error message. 27 00:01:58,700 --> 00:02:01,220 Here are some of the essential properties. 28 00:02:03,740 --> 00:02:07,310 Every single property in this list is a Boolean value. 29 00:02:07,610 --> 00:02:10,190 The first property is called valid. 30 00:02:10,729 --> 00:02:13,670 This property will tell us if a controller is valid. 31 00:02:13,910 --> 00:02:19,520 If a validator returns an error, angular will automatically update this property. 32 00:02:19,910 --> 00:02:22,850 This behavior goes for the other properties to. 33 00:02:23,150 --> 00:02:24,770 They're managed by angular. 34 00:02:24,950 --> 00:02:27,980 We should treat them as read only properties. 35 00:02:28,490 --> 00:02:30,890 The next property is called invalid. 36 00:02:31,250 --> 00:02:34,940 It holds the opposite of the value of a valid property. 37 00:02:35,240 --> 00:02:37,910 It'll tell us if the controller is invalid. 38 00:02:38,610 --> 00:02:41,690 Afterward, we have the disabled property. 39 00:02:42,050 --> 00:02:45,620 In some cases, angular may disable a controller. 40 00:02:45,920 --> 00:02:49,520 Disabled controllers do not get validated by angular. 41 00:02:49,820 --> 00:02:53,600 We can check if validation is disabled with this property. 42 00:02:54,290 --> 00:02:57,260 Up next, we have the touch property. 43 00:02:57,710 --> 00:03:00,920 Input elements can emit an event called Blur. 44 00:03:01,280 --> 00:03:06,740 The blur event is emitted after an input has been clicked on and then clicked away. 45 00:03:07,100 --> 00:03:12,830 If this event is emitted, Angular will toggle this property from false to true. 46 00:03:13,460 --> 00:03:16,850 Subsequently, we have the untouched property. 47 00:03:17,180 --> 00:03:21,050 This property is set to true after the Blur event. 48 00:03:21,230 --> 00:03:23,850 This property will be toggled to false. 49 00:03:24,440 --> 00:03:27,620 This property is followed by the pristine property. 50 00:03:27,980 --> 00:03:31,220 It'll tell us if the initial value hasn't changed. 51 00:03:31,520 --> 00:03:34,790 The opposite of this property is the dirty property. 52 00:03:35,330 --> 00:03:41,480 Some students tend to be confused about the difference between the dirty and touched properties. 53 00:03:41,780 --> 00:03:44,820 They both will have an initial value of false. 54 00:03:45,230 --> 00:03:52,160 The touch property is set to true if the user clicks on the input and then clicks away from the input, 55 00:03:52,520 --> 00:03:55,550 whereas the dirty property will be set to true. 56 00:03:55,580 --> 00:03:57,350 Once the value changes. 57 00:03:59,980 --> 00:04:02,290 Let's start using these properties. 58 00:04:02,710 --> 00:04:08,110 We are going to use the touched and dirty properties to help us render the error message. 59 00:04:08,320 --> 00:04:11,830 If both properties are true, we should output in error. 60 00:04:12,250 --> 00:04:16,390 Our goal is to display an error after the user fills out a field. 61 00:04:16,690 --> 00:04:19,420 These properties are perfect for this scenario. 62 00:04:19,720 --> 00:04:22,029 Open the register template file. 63 00:04:24,520 --> 00:04:28,360 We will update the condition on the first paragraph element. 64 00:04:28,810 --> 00:04:30,730 It's going to be a long condition. 65 00:04:30,940 --> 00:04:34,210 We will insert the condition at the beginning of the tag. 66 00:04:34,540 --> 00:04:44,290 The condition will be the following register form controls dot name, dot touch and register form dot 67 00:04:44,290 --> 00:04:48,340 controls, dot name, dot dirty and. 68 00:04:51,010 --> 00:04:57,100 The error message will get rendered if the following three conditions are true the inputs, initial 69 00:04:57,100 --> 00:05:03,840 value has changed, the inputs been touched, the inputs value has failed validation. 70 00:05:04,300 --> 00:05:10,120 We will copy the conditions over to the other error message for the minimum length validator. 71 00:05:12,670 --> 00:05:16,210 In my opinion, our template is starting to become cluttered. 72 00:05:16,510 --> 00:05:18,100 You may feel the same way. 73 00:05:18,400 --> 00:05:19,720 We will fix this soon. 74 00:05:20,020 --> 00:05:22,450 First, let's test our conditions. 75 00:05:22,690 --> 00:05:25,240 Open the registration form in the browser. 76 00:05:27,680 --> 00:05:30,500 Without touching the inputs, nothing appears. 77 00:05:30,770 --> 00:05:33,320 The behavior has completely changed. 78 00:05:33,560 --> 00:05:37,010 If we touch the input, nothing changes next. 79 00:05:37,190 --> 00:05:42,200 If I type a single character and move away, an error appears great. 80 00:05:42,470 --> 00:05:46,830 We've got the behavior we were looking for in an upcoming lecture. 81 00:05:46,850 --> 00:05:49,280 We will address the mess in our template.