1 00:00:03,650 --> 00:00:09,630 We had dealt with reactive forms in one of the previous lessons, 2 00:00:09,630 --> 00:00:14,420 where we did two exercises dealing with reactive forms, 3 00:00:14,420 --> 00:00:15,695 how we create them, 4 00:00:15,695 --> 00:00:20,530 and then also do some basic form validation on reactive forms. 5 00:00:20,530 --> 00:00:24,525 We'll continue with the theme in this lesson, 6 00:00:24,525 --> 00:00:28,790 because reactive forms as the name implies, 7 00:00:28,790 --> 00:00:33,019 has something to do with reactive programming as you might have expected. 8 00:00:33,019 --> 00:00:42,429 Now, reactive forms also enable you to watch changes in the values of the form elements, 9 00:00:42,429 --> 00:00:48,320 using an observable that Angular makes available called valueChanges. 10 00:00:48,320 --> 00:00:53,450 We'll make use of the valueChanges observable in this exercise, 11 00:00:53,450 --> 00:00:57,080 in order to track changes to the values of 12 00:00:57,080 --> 00:01:01,650 their various form elements and then immediately trigger form validation. 13 00:01:01,650 --> 00:01:06,350 In this exercise we're going to doing most of the form validation in 14 00:01:06,350 --> 00:01:11,120 code rather than in the template itself, 15 00:01:11,120 --> 00:01:19,189 as we did with the reactor form validation in the second exercise of reactive forms. 16 00:01:19,189 --> 00:01:24,115 Going to contact.component.tsfile, 17 00:01:24,115 --> 00:01:29,720 we're going to update the reactive form that we have created here, 18 00:01:29,720 --> 00:01:34,445 by adding a few more Validators for some of these fields. 19 00:01:34,445 --> 00:01:38,915 So, here you see that for the first last name and 20 00:01:38,915 --> 00:01:43,465 the telephone number and email we have added the required Validators. 21 00:01:43,465 --> 00:01:45,290 For the first and the last name, 22 00:01:45,290 --> 00:01:48,500 I'm going to add in a couple of more Validators for 23 00:01:48,500 --> 00:01:52,315 the minimum length and the maximum length. 24 00:01:52,315 --> 00:01:57,185 Now, if you have more than one Validator in your reactive form, 25 00:01:57,185 --> 00:02:04,470 you have to declare them using an array in there. 26 00:02:04,470 --> 00:02:08,385 So, this has to be enclosed inside an array here. 27 00:02:08,385 --> 00:02:12,790 So, you see that I have enclosed the required Validator inside an array. 28 00:02:12,790 --> 00:02:21,300 I'm going to add in a Validators, minLength Validator. 29 00:02:21,300 --> 00:02:25,250 So, for the minimum length I will specify two as the minimum length, 30 00:02:25,250 --> 00:02:28,925 so the firstname should at least contain two characters. 31 00:02:28,925 --> 00:02:36,645 Also the maximum length that I will 32 00:02:36,645 --> 00:02:48,035 add as 25 characters. 33 00:02:48,035 --> 00:02:52,740 So, here you see that now for the first name we have three different Validations, 34 00:02:52,740 --> 00:02:55,455 all enclosed in an array here. 35 00:02:55,455 --> 00:02:58,620 Validators required, Validators minLength, 36 00:02:58,620 --> 00:03:02,135 and Validators maxLength here, 25. 37 00:03:02,135 --> 00:03:05,900 So, I'm going to do the same thing also for my last name. 38 00:03:05,900 --> 00:03:11,115 So, let me copy this whole Validators ray here, 39 00:03:11,115 --> 00:03:21,420 and then replace this one with that set of Validators. 40 00:03:21,420 --> 00:03:25,330 Now in addition, for the telephone number, 41 00:03:25,330 --> 00:03:29,060 as you would recall in the earlier version of the form, 42 00:03:29,060 --> 00:03:35,395 the telephone number was willing to accept even alphabets, 43 00:03:35,395 --> 00:03:37,015 but that is not correct. 44 00:03:37,015 --> 00:03:40,070 Telephone numbers are usually numbers. 45 00:03:40,070 --> 00:03:43,955 So, this is where we will use another Validator 46 00:03:43,955 --> 00:03:53,005 called pattern Validators. 47 00:03:53,005 --> 00:03:57,890 So, the pattern Validator allows us to specify a pattern for 48 00:03:57,890 --> 00:04:02,719 the values entered into that particular form element, 49 00:04:02,719 --> 00:04:09,465 and then check to make sure that the value follows the pattern specified. 50 00:04:09,465 --> 00:04:12,470 So, here the pattern that we will use is that the value 51 00:04:12,470 --> 00:04:17,180 should contain only numbers between zero and nine. 52 00:04:17,180 --> 00:04:19,015 For adding the pattern, 53 00:04:19,015 --> 00:04:23,860 we need to do that in the template file as we will see in a short while. 54 00:04:23,860 --> 00:04:26,415 Similarly, for the email, 55 00:04:26,415 --> 00:04:31,635 I will also have another Validator called as the email Validator. 56 00:04:31,635 --> 00:04:35,035 So, we'll add in the Validators email. 57 00:04:35,035 --> 00:04:40,010 This also means that we need to add in a attribute 58 00:04:40,010 --> 00:04:44,990 called email to the input in our template file. 59 00:04:44,990 --> 00:04:53,145 Now, with these changes my form validation has now become more robust in this exercise. 60 00:04:53,145 --> 00:04:59,534 Now, when the form experiences changes in any of it's form elements, 61 00:04:59,534 --> 00:05:09,530 then the Angular framework provides an observable called as valueChanges observable. 62 00:05:09,530 --> 00:05:16,150 So, I'm going to use the valueChanges observable on my feedback form. 63 00:05:16,550 --> 00:05:19,770 So, the valueChanges observable. 64 00:05:19,770 --> 00:05:26,640 So, the valueChanges observable can now be subscribed to within this particular method. 65 00:05:26,640 --> 00:05:28,415 So when we create the form itself, 66 00:05:28,415 --> 00:05:31,520 we will subscribe to the valueChanges observable here. 67 00:05:31,520 --> 00:05:33,470 Now, when the valueChanges, 68 00:05:33,470 --> 00:05:38,274 so by subscribing to this observable, 69 00:05:38,274 --> 00:05:44,630 within the subscribe I will specify what should be done when the valueChanges. 70 00:05:44,630 --> 00:05:49,160 So, when the valueChanges I would obtain some data here, 71 00:05:49,160 --> 00:05:52,055 from the farm to indicate 72 00:05:52,055 --> 00:05:59,050 which particular form element has experienced the change in the value. 73 00:05:59,050 --> 00:06:00,665 Then, when that happens, 74 00:06:00,665 --> 00:06:07,865 I'm going to trigger a local method that I will implement called onValueChanged, 75 00:06:07,865 --> 00:06:13,165 and then supply that data as a parameter to this method. 76 00:06:13,165 --> 00:06:16,455 Now, inside this onValueChanged method, 77 00:06:16,455 --> 00:06:20,445 I'm going to initiate the form validation, 78 00:06:20,445 --> 00:06:27,155 and then appropriately define the form error messages based upon what 79 00:06:27,155 --> 00:06:35,380 this data object that I obtain here will specify to me. 80 00:06:35,380 --> 00:06:39,125 Also in addition, when I first create the form, 81 00:06:39,125 --> 00:06:47,114 I will call the onValueChanged method without any parameter, 82 00:06:47,114 --> 00:06:50,250 and this would be used to 83 00:06:50,250 --> 00:06:58,615 reset form validation messages. 84 00:06:58,615 --> 00:07:02,195 Now, how do I create the form validation messages? 85 00:07:02,195 --> 00:07:09,230 To do that, I'm going to define my form validation messages completely in code here. 86 00:07:09,230 --> 00:07:12,620 Then through the code, 87 00:07:12,620 --> 00:07:15,920 I will adapt the form validation messages, 88 00:07:15,920 --> 00:07:23,785 and that would be then used to display the error messages in my form template itself. 89 00:07:23,785 --> 00:07:33,830 So to do that, what I'm going to do is to add a few JavaScript objects in here. 90 00:07:33,830 --> 00:07:42,485 One of the JavaScript objects that I'm going to add is named as form errors. 91 00:07:42,485 --> 00:07:46,790 So, this is a simple JavaScript object that 92 00:07:46,790 --> 00:07:52,315 will contain all the errors for the particular form here. 93 00:07:52,315 --> 00:07:54,799 So within the form errors, 94 00:07:54,799 --> 00:08:02,609 I will use four different fields, 95 00:08:02,609 --> 00:08:11,275 first name, last name. 96 00:08:11,275 --> 00:08:13,305 So as you recall, 97 00:08:13,305 --> 00:08:21,889 these correspond to the four form elements on which I am doing the form validation, 98 00:08:21,889 --> 00:08:30,470 telephone number and email. 99 00:08:30,470 --> 00:08:35,020 Now, why do I define this JavaScript object here? 100 00:08:35,020 --> 00:08:41,075 Now, this JavaScript object as you see contains four elements here. 101 00:08:41,075 --> 00:08:44,270 Now, whenever I do the form validation, 102 00:08:44,270 --> 00:08:47,090 recall that I already specified that 103 00:08:47,090 --> 00:08:50,915 I'm going to create a new method called onValueChange. 104 00:08:50,915 --> 00:08:55,145 Inside the onValueChange, the way the code is written is that, 105 00:08:55,145 --> 00:08:58,300 if any error is detected, 106 00:08:58,300 --> 00:09:02,315 a string containing the message corresponding to 107 00:09:02,315 --> 00:09:08,135 that error will be added into this JavaScript object. 108 00:09:08,135 --> 00:09:10,535 So, this way within my code, 109 00:09:10,535 --> 00:09:13,204 I can do the form validation. 110 00:09:13,204 --> 00:09:15,315 Now, in addition to this, 111 00:09:15,315 --> 00:09:21,150 I will now define a few validation messages. 112 00:09:21,840 --> 00:09:27,100 Now, this particular pattern of doing things, 113 00:09:27,100 --> 00:09:36,345 I learned by reading the documentation on form validation in the angular.io website. 114 00:09:36,345 --> 00:09:43,020 So, they have a whole documentation on how to do form validation and a link to which is 115 00:09:43,020 --> 00:09:45,315 available in the additional resources of 116 00:09:45,315 --> 00:09:50,510 this chapter and also the previous chapters on angular forms. 117 00:09:50,510 --> 00:09:55,950 So, there in that particular document they 118 00:09:55,950 --> 00:10:02,655 prescribe this as a way of doing form validation and I found that to be very intuitive. 119 00:10:02,655 --> 00:10:08,640 So, I also adopted the same pattern for doing form validation in code. 120 00:10:08,640 --> 00:10:10,500 So, along with here, 121 00:10:10,500 --> 00:10:20,515 I'm going to define the validation messages for all the possible fields here. 122 00:10:20,515 --> 00:10:22,475 So, for the first name field, 123 00:10:22,475 --> 00:10:30,050 I will define a few validation messages here, so I would say, 124 00:10:30,050 --> 00:10:32,965 "required" and then say, 125 00:10:32,965 --> 00:10:39,940 "first name is required" like this, 126 00:10:39,940 --> 00:10:48,790 I will add in a few validation messages 127 00:10:48,790 --> 00:10:52,030 here and say, 128 00:10:52,030 --> 00:10:57,070 "First name must be 129 00:10:57,070 --> 00:11:05,770 at least 2 characters long" and then I will also add, 130 00:11:05,770 --> 00:11:15,700 "max length" and the corresponding message would be, 131 00:11:15,700 --> 00:11:23,630 "First name cannot be more than 25". 132 00:11:24,780 --> 00:11:29,685 If you have a name which runs into 25 characters, 133 00:11:29,685 --> 00:11:35,115 you must be really cursing your parents for that, believe me, 134 00:11:35,115 --> 00:11:39,670 one of my middle names is a long middle name, 135 00:11:39,670 --> 00:11:46,035 and which I don't use explicitly in my documents. 136 00:11:46,035 --> 00:11:48,870 But, I can understand the pain, 137 00:11:48,870 --> 00:11:55,450 if you have a long name greater than 25 characters. 138 00:11:56,700 --> 00:12:02,900 People from some states in Southern part of India have long names, 139 00:12:03,690 --> 00:12:06,870 my state included, hey, 140 00:12:06,870 --> 00:12:09,270 let's have some fun while we are at it. 141 00:12:09,270 --> 00:12:17,180 Okay, I'm also going to include the same thing for the last name. 142 00:12:17,180 --> 00:12:23,380 So, I'm going to edit this 143 00:12:23,380 --> 00:12:33,430 and specify the same thing as last name. 144 00:12:33,430 --> 00:12:39,020 So, as you see within the code you can specify a set of error messages. 145 00:12:39,020 --> 00:12:42,855 Now, if you add new validation to your forms, 146 00:12:42,855 --> 00:12:44,505 all that you need to do is, 147 00:12:44,505 --> 00:12:47,230 come here and add in the new error message into 148 00:12:47,230 --> 00:12:54,635 this JavaScript object here and your code will work just fine, as such. 149 00:12:54,635 --> 00:13:03,015 So, that's the advantage of using this pattern for designing your validation in code. 150 00:13:03,015 --> 00:13:09,835 Continuing, let me define the validation for telephone number and 151 00:13:09,835 --> 00:13:17,700 the two validation for telephone numbers that would happen is the "required". 152 00:13:17,700 --> 00:13:22,390 So, I'm just going to copy the "required" from there, 153 00:13:22,390 --> 00:13:24,170 and paste it in here, 154 00:13:24,170 --> 00:13:27,215 and I would say, 155 00:13:27,215 --> 00:13:36,910 "Telephone number is required," and the next error message would be for "pattern". 156 00:13:36,910 --> 00:13:42,585 So, the error message says, 157 00:13:42,585 --> 00:13:50,770 "Telephone number must contain only numbers." 158 00:13:50,910 --> 00:13:58,070 So, that's the other message, similarly for email. 159 00:13:58,070 --> 00:14:03,109 So, as you can see the values that I'm using here 160 00:14:03,109 --> 00:14:08,430 are corresponding to the Validator names that I've used, 161 00:14:08,430 --> 00:14:12,305 "mid length", "max length required", "pattern". 162 00:14:12,305 --> 00:14:14,280 So, similarly for email, 163 00:14:14,280 --> 00:14:18,720 you would see "required" and "Email'. 164 00:14:18,720 --> 00:14:28,615 So, I'm just going to copy the "required" over here and say, "Email is required". 165 00:14:28,615 --> 00:14:36,020 The other pattern as you recall is for email and I would say, 166 00:14:36,020 --> 00:14:40,865 "Email not in valid format". 167 00:14:40,865 --> 00:14:43,200 So, typically if your email doesn't contain 168 00:14:43,200 --> 00:14:48,190 an @ sign and characters on both sides of the @ sign, 169 00:14:48,190 --> 00:14:50,230 then that is not a valid email. 170 00:14:50,230 --> 00:14:58,265 This email Validator is already built into the angular reactive forms module. 171 00:14:58,265 --> 00:15:02,240 So, we'll make use of the email Validator here. 172 00:15:02,240 --> 00:15:07,450 So, here we have all the validation messages defined in code. 173 00:15:07,450 --> 00:15:14,340 So, that makes it very easy to extend them for additional fields if you require and also 174 00:15:14,340 --> 00:15:17,770 adding more validation messages for additional Validations 175 00:15:17,770 --> 00:15:21,865 that you might introduce for each of those form fields. 176 00:15:21,865 --> 00:15:25,785 Also, this object form errors helps me to track 177 00:15:25,785 --> 00:15:31,415 all the errors associated with each of the elements in my phone. 178 00:15:31,415 --> 00:15:34,390 So, currently I only check these four elements, 179 00:15:34,390 --> 00:15:37,165 so that's why I only have for that. 180 00:15:37,165 --> 00:15:42,365 Minor correction, the "mid length" should be min, 181 00:15:42,365 --> 00:15:45,910 small 'l' and max length also with a small 'l', 182 00:15:45,910 --> 00:15:48,140 similarly for the last name also. 183 00:15:48,140 --> 00:15:53,750 Now, let's write the code for the on values changed method. 184 00:15:53,750 --> 00:15:55,765 So, I'm going to write the method 185 00:15:55,765 --> 00:16:02,860 here,"ValueChanged" and then this 186 00:16:02,860 --> 00:16:08,275 will take in a parameter, possibly. 187 00:16:08,275 --> 00:16:10,900 That's why I put a data question mark, 188 00:16:10,900 --> 00:16:16,760 meaning that the parameter is optional. 189 00:16:17,760 --> 00:16:27,610 So, the first thing I will check is, "this feedback form", 190 00:16:27,610 --> 00:16:32,290 which means that if the feedback form has not been created then, 191 00:16:32,290 --> 00:16:34,960 and if this method is called, 192 00:16:34,960 --> 00:16:42,130 then you should simply "return" without anything. 193 00:16:42,130 --> 00:16:50,680 Then, I'll define a 194 00:16:50,680 --> 00:16:56,780 constant called "this feedback 195 00:16:56,780 --> 00:17:03,025 form" is just to make it easy to define the the rest of the code, 196 00:17:03,025 --> 00:17:05,380 then I would say, "for 197 00:17:06,240 --> 00:17:16,330 const field in this.form errors". 198 00:17:16,330 --> 00:17:21,510 So, notice that this field will take this.form errors, 199 00:17:21,510 --> 00:17:24,710 the form errors object that we have defined earlier. 200 00:17:24,710 --> 00:17:28,150 So, feel means that I will check all the four. 201 00:17:28,150 --> 00:17:29,890 So, whenever I detect any changes, 202 00:17:29,890 --> 00:17:31,260 the first name, the last name, 203 00:17:31,260 --> 00:17:32,820 tel number and an email. 204 00:17:32,820 --> 00:17:41,080 So, that's why these four will carry the exact same names as we used in the form here, 205 00:17:41,080 --> 00:17:50,330 and so that the code written here will be straightforward to work with. 206 00:17:52,770 --> 00:17:56,650 So, I'm going to now check the form fields. 207 00:17:56,650 --> 00:18:07,090 Then, I would first 208 00:18:07,090 --> 00:18:16,000 make sure that in case I have earlier attached any messages to these form fields, 209 00:18:16,000 --> 00:18:17,810 form errors object there, 210 00:18:17,810 --> 00:18:19,665 then I'm going to clear all of them. 211 00:18:19,665 --> 00:18:23,830 So, that's why if you call this with no parameter, 212 00:18:23,830 --> 00:18:26,600 all the form error fields will be cleared, 213 00:18:26,600 --> 00:18:36,335 and then I would do, "control FormGet". 214 00:18:36,335 --> 00:18:44,330 So, notice that I am using that field itself to do a FormGet so, 215 00:18:44,330 --> 00:18:48,530 I am getting access to that particular form field. 216 00:18:48,530 --> 00:18:52,090 So, notice that earlier we were doing "feedbackform.this.feedbackform.get"firstname." 217 00:18:58,930 --> 00:19:04,870 and so on. So, I've simplified what into this particular constant that we 218 00:19:04,870 --> 00:19:13,000 defined here and then I will say, "If control". 219 00:19:13,000 --> 00:19:22,645 So, which means that if control is not null and "control.dirty". 220 00:19:22,645 --> 00:19:28,150 So, if that particular field is already dirty 221 00:19:28,150 --> 00:19:33,635 and not "control valid". 222 00:19:33,635 --> 00:19:36,280 So, means that for each of the fields, 223 00:19:36,280 --> 00:19:39,780 I am literally checking to see if it is valid, 224 00:19:39,780 --> 00:19:40,840 if it is dirty, 225 00:19:40,840 --> 00:19:44,260 and then if the control is already there. 226 00:19:44,260 --> 00:19:48,430 Then, I'm going to check to see what kind of errors have been added to 227 00:19:48,430 --> 00:19:53,185 this particular control by the form there. 228 00:19:53,185 --> 00:19:55,045 So, in here I will say, 229 00:19:55,045 --> 00:19:59,500 "const messages equal 230 00:19:59,500 --> 00:20:06,560 to this.validation messages field". 231 00:20:07,260 --> 00:20:10,635 Notice how I am picking up 232 00:20:10,635 --> 00:20:15,785 all the validation messages corresponding to that particular field firstname, 233 00:20:15,785 --> 00:20:19,370 lastname, or telnum or email, 234 00:20:19,370 --> 00:20:23,585 and then I will check and see whether I need to add this into the field. 235 00:20:23,585 --> 00:20:25,050 So, how do I do that? 236 00:20:25,050 --> 00:20:35,360 So, we do for const key in control.errors. 237 00:20:35,360 --> 00:20:45,510 So, notice that this control is feedback form.get field and.error, 238 00:20:45,510 --> 00:20:48,980 so I'm checking to see if there are any errors there. 239 00:20:48,980 --> 00:20:51,370 Then, in that case, 240 00:20:51,370 --> 00:20:58,485 I will add this form errors field. 241 00:20:58,485 --> 00:21:06,285 So, for that particular item in the JavaScript object that I've defined here, 242 00:21:06,285 --> 00:21:13,180 I would add messages key 243 00:21:13,180 --> 00:21:21,135 plus and space here. 244 00:21:21,135 --> 00:21:24,590 So, now whatever form error survey 245 00:21:24,590 --> 00:21:27,555 or the corresponding message will be taken and attached in, 246 00:21:27,555 --> 00:21:32,350 and then so my form errors JavaScript object will now contain 247 00:21:32,350 --> 00:21:34,970 all the error messages attached together when 248 00:21:34,970 --> 00:21:39,780 this particular on values changed method rats. 249 00:21:39,780 --> 00:21:44,430 Now, this particular piece of code I have borrowed from 250 00:21:44,430 --> 00:21:50,560 the form validation documentation on angular.iu. 251 00:21:50,560 --> 00:21:55,240 I found that this is very intuitive way of doing form error checking. 252 00:21:55,240 --> 00:22:02,195 So, I thought why not make use of that within our angular reactive forms exercise. 253 00:22:02,195 --> 00:22:05,515 So, adding this code in there. 254 00:22:05,515 --> 00:22:15,180 Now, my application is all ready to do the form validation for my reactive form. 255 00:22:15,180 --> 00:22:22,500 So, now the next step is to go to the contact component.html, 256 00:22:22,500 --> 00:22:25,805 the template file, and then update the template file. 257 00:22:25,805 --> 00:22:28,505 So, going to that template file, 258 00:22:28,505 --> 00:22:31,275 we will now go to the form, 259 00:22:31,275 --> 00:22:39,100 and the in this form now instead of doing all this checks in code, 260 00:22:39,920 --> 00:22:48,165 we can now simplify a lot of the code here in the template file here. 261 00:22:48,165 --> 00:22:50,550 Now, instead of doing all these checks, 262 00:22:50,550 --> 00:22:56,065 what we realize is that the form errors JavaScript object in 263 00:22:56,065 --> 00:23:00,270 my typescript file if there are errors then 264 00:23:00,270 --> 00:23:05,610 the form errors JavaScript object for that particular field, 265 00:23:05,610 --> 00:23:10,125 will have all the error messages attached to it. 266 00:23:10,125 --> 00:23:11,460 If there are no errors, 267 00:23:11,460 --> 00:23:14,505 then those error messages will not be there. 268 00:23:14,505 --> 00:23:17,860 So, that is what I am going to use to check and 269 00:23:17,860 --> 00:23:21,245 see whether I should display the form error or not. 270 00:23:21,245 --> 00:23:24,685 So, for that matter instead of checking all this, 271 00:23:24,685 --> 00:23:34,740 the only thing that I need to check here is formErrors firstname, that's it. 272 00:23:34,740 --> 00:23:40,450 So, very easy to check for errors here. 273 00:23:41,110 --> 00:23:47,095 Similarly, so this whole code now gets simplified here, 274 00:23:47,095 --> 00:23:52,100 and similarly when you check for the message here, 275 00:23:52,100 --> 00:23:56,615 what we're going to do, I'm going to change this whole thing from 276 00:23:56,615 --> 00:24:05,165 required touched to formErrors.firstname. 277 00:24:05,165 --> 00:24:08,955 That's it. If that exists, 278 00:24:08,955 --> 00:24:14,760 then all the error messages corresponding to this will already be in there, 279 00:24:14,760 --> 00:24:19,620 so I just need to do interpolation and 280 00:24:19,620 --> 00:24:26,555 then display formErrors.firstname here, 281 00:24:26,555 --> 00:24:28,385 as simple as that. 282 00:24:28,385 --> 00:24:30,240 Now, you see by doing 283 00:24:30,240 --> 00:24:36,355 all the form error validation and code and doing all the checks and so on in code, 284 00:24:36,355 --> 00:24:40,200 you have already constructed the error messages that we need to display. 285 00:24:40,200 --> 00:24:42,740 All that we do is we take that error message and then put 286 00:24:42,740 --> 00:24:45,745 this into the template here, that's it. 287 00:24:45,745 --> 00:24:50,105 The template code becomes more simplified in this particular case, 288 00:24:50,105 --> 00:24:57,225 and also by doing the form validation using the typescript code, 289 00:24:57,225 --> 00:25:02,045 we have simplified the template here at at the same time we can do 290 00:25:02,045 --> 00:25:09,165 more complicated form validation in our typescript code. 291 00:25:09,165 --> 00:25:16,500 I'm going to go ahead and do the same kind of changes to the remaining fields here, 292 00:25:16,500 --> 00:25:20,460 so for the lastname field, 293 00:25:20,460 --> 00:25:30,850 I'm going to again replace this whole thing with formErrors.lastname. 294 00:25:34,100 --> 00:25:41,050 Now, again do the same thing for the telephone number. 295 00:25:41,330 --> 00:25:46,910 Now, again as you see the structure of the template becomes very, 296 00:25:46,910 --> 00:25:50,230 very uniform in this case. 297 00:25:50,230 --> 00:25:55,020 So, that also is another way of simplifying 298 00:25:55,020 --> 00:26:01,660 the structure of your template continuing to the email field here. 299 00:26:01,660 --> 00:26:06,640 I'm going to do the same change to the email field also. 300 00:26:06,640 --> 00:26:10,430 So, I would say formErrors.email 301 00:26:12,470 --> 00:26:19,140 and replace this by formatters.email. 302 00:26:19,140 --> 00:26:20,995 So as you can see, 303 00:26:20,995 --> 00:26:28,455 your template code has simplified significantly compared to before. 304 00:26:28,455 --> 00:26:32,545 With this all the error validation that I require 305 00:26:32,545 --> 00:26:36,600 has been added into my template and my template is now updated, 306 00:26:36,600 --> 00:26:38,900 so let's save the changes. 307 00:26:39,560 --> 00:26:46,800 Two other things that I need to add is attribute 308 00:26:46,800 --> 00:26:53,255 called email to this particular field called email. 309 00:26:53,255 --> 00:26:56,625 So, remember that we added the email Validator here. 310 00:26:56,625 --> 00:26:58,300 So, along with the required, 311 00:26:58,300 --> 00:27:03,655 I'm going to add email also to the input field here. 312 00:27:03,655 --> 00:27:05,655 Similarly, for the telnum, 313 00:27:05,655 --> 00:27:08,115 we use the pattern there. 314 00:27:08,115 --> 00:27:14,670 So, I'm going to add in the pattern so this is the input field for the telnum. 315 00:27:14,670 --> 00:27:24,485 So, within the input field I'm going to add pattern is equal to and 316 00:27:24,485 --> 00:27:29,250 the pattern that I'm going to add is 317 00:27:29,250 --> 00:27:35,350 within square brackets zero to nine, 318 00:27:35,350 --> 00:27:37,875 and then put a star there. 319 00:27:37,875 --> 00:27:45,430 So, which means that this is anything zero to nine repeated multiple times. 320 00:27:45,430 --> 00:27:51,045 So, the telephone number can contain any numbers between zero and nine. 321 00:27:51,045 --> 00:27:53,370 Any number of those numbers. 322 00:27:53,370 --> 00:27:57,085 You can also put a minlength and maxlength onto the telnum field 323 00:27:57,085 --> 00:28:01,100 if for your particular country the telephone number has a fixed format, 324 00:28:01,100 --> 00:28:02,440 you can do that too. 325 00:28:02,440 --> 00:28:05,410 So, that can easily be done. 326 00:28:05,410 --> 00:28:08,130 But, in this exercise, 327 00:28:08,130 --> 00:28:13,470 I didn't add in the minlength and maxlength restriction for the telnum here. 328 00:28:13,470 --> 00:28:15,720 Now, that we have done all the updates, 329 00:28:15,720 --> 00:28:23,150 let's save the changes and then go and take a look at the form in the browser. 330 00:28:23,150 --> 00:28:25,640 Going to the browser now, 331 00:28:25,640 --> 00:28:28,920 let's scroll down to the form here. 332 00:28:28,920 --> 00:28:34,775 Let's type in the first name and as you see when you type in only a single character, 333 00:28:34,775 --> 00:28:38,290 then the error message is immediately displayed, 334 00:28:38,290 --> 00:28:42,490 but the moment you type in additional characters that error message will disappear. 335 00:28:42,490 --> 00:28:44,980 Similarly, for the last name. 336 00:28:44,980 --> 00:28:50,794 For the telephone number, if you try to type in anything other than numbers, 337 00:28:50,794 --> 00:28:53,830 then the error messages display. 338 00:28:54,240 --> 00:28:56,575 So, you can type in, 339 00:28:56,575 --> 00:29:04,790 similarly for email, so you see that the email not invalid format will be displayed. 340 00:29:04,790 --> 00:29:10,380 If you don't have the email then it also shows the error message. 341 00:29:10,380 --> 00:29:14,415 But, the moment you type something like this, 342 00:29:14,415 --> 00:29:18,745 then this is considered a valid email format so it will be accepted. 343 00:29:18,745 --> 00:29:23,895 So, that is the set of error messages and the form validation 344 00:29:23,895 --> 00:29:30,080 done completely in code as done in this particular exercise. 345 00:29:30,080 --> 00:29:33,625 So, with this, we complete this exercise. 346 00:29:33,625 --> 00:29:40,200 In this exercise, we have seen the use of the value change is observable, 347 00:29:40,200 --> 00:29:46,915 and we also saw how we can do form validation in our typescript code. 348 00:29:46,915 --> 00:29:49,040 This completes this exercise. 349 00:29:49,040 --> 00:29:52,030 This is a good time for you to do a git commit with 350 00:29:52,030 --> 00:29:56,310 the message reactive forms part three.