1 00:00:00,000 --> 00:00:04,735 [MUSIC] 2 00:00:04,735 --> 00:00:09,734 Now that we have had a quick introduction to reactive form validation in 3 00:00:09,734 --> 00:00:14,901 the previous lecture, let's proceed to the next exercise where we could 4 00:00:14,901 --> 00:00:20,926 apply form validation to the reactive form that we created in the previous exercise. 5 00:00:20,926 --> 00:00:26,101 So going to our contact component typescript file, 6 00:00:26,101 --> 00:00:34,463 let's add in the form validators to each of these properties within our form model. 7 00:00:34,463 --> 00:00:42,264 So for the first name I would say within the array, Validators. 8 00:00:45,794 --> 00:00:50,830 Required, Similarly I will 9 00:00:50,830 --> 00:00:55,977 apply the same to the, lastname. 10 00:00:58,032 --> 00:01:02,361 Then email, and also for the telnum, so for 11 00:01:02,361 --> 00:01:09,030 the telnum I would say for the remaining three I can leave them open, 12 00:01:09,030 --> 00:01:16,066 because I agree with either be false or true and give them other values. 13 00:01:16,066 --> 00:01:21,117 Because it's a slight toggle and contacttype can take only one 14 00:01:21,117 --> 00:01:26,166 of the three values and Default value's already given there, 15 00:01:26,166 --> 00:01:30,470 and for message, we can make it not a required value. 16 00:01:30,470 --> 00:01:32,595 If the user doesn't want to type in comments, 17 00:01:32,595 --> 00:01:36,030 you can allow them to not type in comments, but if you want to, 18 00:01:36,030 --> 00:01:39,619 you can add the Validators.required even for message. 19 00:01:39,619 --> 00:01:46,890 In addition, when you reset the form in the onSubmit method here 20 00:01:46,890 --> 00:01:52,910 you can also reset the form to its initial value as we specified 21 00:01:52,910 --> 00:01:57,630 in the method where we created the form. 22 00:01:57,630 --> 00:02:05,100 So within the reset value, it takes an object as a parameter here. 23 00:02:05,100 --> 00:02:10,479 This object will be used by the reset method by making 24 00:02:10,479 --> 00:02:17,447 use of the set value method that we saw in the lecture earlier to reset 25 00:02:17,447 --> 00:02:24,192 the form to the condition as it was when it is originally created. 26 00:02:24,192 --> 00:02:28,467 So, here we can supply 27 00:02:28,467 --> 00:02:35,442 parameters like firstname: ' ', 28 00:02:35,442 --> 00:02:41,745 lastname: ' ', telnum: 0, 29 00:02:43,660 --> 00:02:47,219 Then email: ' ', 30 00:02:49,160 --> 00:02:53,690 agree: false, 31 00:02:53,690 --> 00:03:01,132 contacttype: 'None', 32 00:03:01,132 --> 00:03:07,940 message: ' '});. 33 00:03:07,940 --> 00:03:11,206 So these values that we supplied in this 34 00:03:14,042 --> 00:03:19,081 JavaScript object that we give us the parameter to the reset 35 00:03:19,081 --> 00:03:23,514 method will have exactly the same values as we saw for 36 00:03:23,514 --> 00:03:28,168 these properties when we created that feedback form. 37 00:03:28,168 --> 00:03:32,325 We also need to reset the form completely in the template. 38 00:03:32,325 --> 00:03:36,532 So to do that, to go back to the import up here, and 39 00:03:36,532 --> 00:03:43,130 then we'll also import the ViewChild } from '@angular/core';. 40 00:03:43,130 --> 00:03:45,950 This will enable us to get access to 41 00:03:45,950 --> 00:03:49,910 any of the child dom elements within my template. 42 00:03:49,910 --> 00:03:54,054 So after doing this, coming into the code, 43 00:03:54,054 --> 00:03:59,321 here in the ContactComponent, I can say @ViewChild, 44 00:03:59,321 --> 00:04:04,250 and then I will be able to refer to the feedbackForm by 45 00:04:04,250 --> 00:04:09,088 giving it a template variable with the name fform. 46 00:04:09,088 --> 00:04:14,698 You're going to do that in the next step, and then so for this, 47 00:04:14,698 --> 00:04:19,770 I will refer to this by using feedbackFormDirective. 48 00:04:21,890 --> 00:04:27,030 So this enables us to get access to the template form and then completely reset 49 00:04:27,030 --> 00:04:34,200 it, so that the form itself is reset back to its pristine value. 50 00:04:34,200 --> 00:04:38,710 So this is another additional step that we need to do to ensure that the form is 51 00:04:38,710 --> 00:04:43,470 completely reset to its initial value here. 52 00:04:43,470 --> 00:04:50,268 Now having done that in the onSubject method, after we reset the feedbackForm 53 00:04:53,241 --> 00:04:58,669 Object itself here, we also need to add 54 00:04:58,669 --> 00:05:06,242 in this.feedbackFormDirective.resetForm(); 55 00:05:08,355 --> 00:05:10,060 In there. 56 00:05:10,060 --> 00:05:15,045 So this will ensure that my feedbackForm is completely reset to its 57 00:05:15,045 --> 00:05:18,400 pristine value at this point. 58 00:05:18,400 --> 00:05:23,273 So after these changes let's now go to our template 59 00:05:23,273 --> 00:05:29,050 file to show how we can reflect these 60 00:05:29,050 --> 00:05:33,630 errors into our template for our form there. 61 00:05:33,630 --> 00:05:35,730 So, switching to the template file. 62 00:05:35,730 --> 00:05:39,490 So first one, we will go to the button here, and 63 00:05:39,490 --> 00:05:44,705 then we will make the button Disabled. 64 00:05:46,924 --> 00:05:56,470 If the "feedbackForm is invalid". 65 00:05:56,470 --> 00:06:01,280 So the button will be enabled only when the feedbackForm is valid. 66 00:06:01,280 --> 00:06:06,403 Moving to that form let me add in 67 00:06:06,403 --> 00:06:15,674 the 00:06:28,727 ('firstname').hasError('required') 69 00:06:30,484 --> 00:06:31,577 && 70 00:06:31,577 --> 00:06:40,875 feedbackForm.get('firstname') 71 00:06:47,340 --> 00:06:54,588 .touched", and the message is First name is required. 72 00:06:56,040 --> 00:07:01,070 So that would be the message you assign using one single line with the hidden, 73 00:07:01,070 --> 00:07:02,370 with this information there. 74 00:07:04,710 --> 00:07:11,009 Let me apply the same thing to the lastname, 75 00:07:15,328 --> 00:07:20,007 Telephone number, and the email. 76 00:07:20,007 --> 00:07:25,736 So I'm just going to copy, and paste, and edit them, 77 00:07:25,736 --> 00:07:32,226 so you can proceed ahead with those, and ('lastname'). 78 00:07:36,243 --> 00:07:38,472 Last name. 79 00:07:38,472 --> 00:07:39,714 Telnum. 80 00:07:39,714 --> 00:07:46,424 So I apply that to ('telnum'). 81 00:07:50,395 --> 00:07:53,948 Again, the same idea behind that and then also to email. 82 00:08:01,227 --> 00:08:01,970 ('email'). 83 00:08:05,976 --> 00:08:10,561 Let's add in the template variable called fform to the form. 84 00:08:10,561 --> 00:08:16,460 So I type #fform="ngForm". 85 00:08:16,460 --> 00:08:22,187 Going to our form in the browser, let me type in the first name, 86 00:08:22,187 --> 00:08:28,240 and you see that even if I delete the value will still remain green, 87 00:08:28,240 --> 00:08:31,501 because we used the touched there. 88 00:08:31,501 --> 00:08:36,522 But the moment I move away from it then you 89 00:08:36,522 --> 00:08:42,586 will be able to see that that becomes a red color. 90 00:08:42,586 --> 00:08:47,659 So similarly for the Last Name you will see that when I 91 00:08:47,659 --> 00:08:54,020 remove the Last Name value, then that is shown there similarly. 92 00:08:54,020 --> 00:08:57,710 Let me type in the first name and the last name, and for the email also. 93 00:08:59,736 --> 00:09:07,411 The, Same case for the telephone number also. 94 00:09:07,411 --> 00:09:12,287 So like this, you can do form validation in our application. 95 00:09:12,287 --> 00:09:16,943 With this, we complete this exercise where we have 96 00:09:16,943 --> 00:09:21,285 added in form validation to our reactive form. 97 00:09:21,285 --> 00:09:26,493 This is a good time for you to do a git commit with the message, 98 00:09:26,493 --> 00:09:28,750 reactive forms part two. 99 00:09:28,750 --> 00:09:34,925 [MUSIC]