1 00:00:03,550 --> 00:00:08,265 With a brief understanding of Angular Reactive Forms, 2 00:00:08,265 --> 00:00:10,670 let's proceed to the next exercise. 3 00:00:10,670 --> 00:00:12,800 In this exercise, we will construct 4 00:00:12,800 --> 00:00:18,705 an Angular Reactive Form in the Angular application that we have been working on so far. 5 00:00:18,705 --> 00:00:25,480 Along the way, we will consolidate our understanding of Angular Reactive Forms. 6 00:00:25,480 --> 00:00:28,435 To get started on the exercise, 7 00:00:28,435 --> 00:00:31,560 the very first step that we need to do is to import 8 00:00:31,560 --> 00:00:35,860 the Angular Reactive Forms module into our app module. 9 00:00:35,860 --> 00:00:38,020 So, let's go to the app module, 10 00:00:38,020 --> 00:00:42,160 and then we see that we had already imported the forms module earlier. 11 00:00:42,160 --> 00:00:46,540 We will also import the Angular Reactive Forms module. 12 00:00:46,540 --> 00:00:49,145 So, I'm going to copy that, paste that here, 13 00:00:49,145 --> 00:00:53,810 and then change that to the Angular Reactive Forms module. 14 00:00:53,810 --> 00:00:57,770 After we do that, we also need to include that into our decorator. 15 00:00:57,770 --> 00:01:00,440 So, going down to the decorator here, 16 00:01:00,440 --> 00:01:05,235 I'm going to import the Reactive forms module in the decorator. 17 00:01:05,235 --> 00:01:09,365 Two other modules that we need to import for 18 00:01:09,365 --> 00:01:14,245 our form is the MatSelectModule, and the MatSlideToggleModule. 19 00:01:14,245 --> 00:01:19,035 The select module allows us to use the select element, 20 00:01:19,035 --> 00:01:24,360 and the SlideToggle enables us to use the slide toggle in our form. 21 00:01:24,360 --> 00:01:26,750 So, to do that, we'll type in 22 00:01:26,750 --> 00:01:35,670 import MatSelectModule from angular/material/select, 23 00:01:36,890 --> 00:01:45,220 and import MatSlideToggleModule from angular/material/slide-toggle, 24 00:01:47,110 --> 00:01:55,195 and then we need to add them to our nGModel decorator in the imports. 25 00:01:55,195 --> 00:01:57,145 So, going down there, 26 00:01:57,145 --> 00:02:02,840 let me import the MatSelectModule and MatSlideToggleModule in there. 27 00:02:02,840 --> 00:02:04,685 So, with this changes, 28 00:02:04,685 --> 00:02:08,240 our app module is now ready to enable us to 29 00:02:08,240 --> 00:02:13,465 use the Reactive forms module in our application. 30 00:02:13,465 --> 00:02:14,920 In the next step, 31 00:02:14,920 --> 00:02:22,105 what I'm going to do is to create a class here called as Feedback. 32 00:02:22,105 --> 00:02:28,265 So, I will create it in the shared folder in the filename feedback.ts. 33 00:02:28,265 --> 00:02:34,790 Now, this is the structure of the class that represents 34 00:02:34,790 --> 00:02:38,210 the data model corresponding to the form model that we're going to 35 00:02:38,210 --> 00:02:41,840 use within our Angular application. 36 00:02:41,840 --> 00:02:50,620 So, I create the class named feedback. 37 00:02:51,210 --> 00:02:53,500 Within the Feedback class, 38 00:02:53,500 --> 00:02:57,160 I'm going to include a few properties; 39 00:02:57,970 --> 00:03:02,830 first name, last name, 40 00:03:02,830 --> 00:03:10,730 then telephone number, Telnum, email, 41 00:03:10,730 --> 00:03:20,440 then I agree which is a Boolean variable, 42 00:03:20,440 --> 00:03:28,385 Boolean property, contacttype which is of the type string. 43 00:03:28,385 --> 00:03:31,730 It'll become more clearer to you why I include all 44 00:03:31,730 --> 00:03:36,145 these when we look at the form design itself. 45 00:03:36,145 --> 00:03:42,350 This particular feedback class corresponds to the feedback that 46 00:03:42,350 --> 00:03:48,045 a user can submit about our restaurant within our Angular application. 47 00:03:48,045 --> 00:03:51,800 So, that's the reason why I create this Feedback class. 48 00:03:51,800 --> 00:03:55,865 We're going to map this into the form model in 49 00:03:55,865 --> 00:04:00,650 one of the components there and also along with that, 50 00:04:00,650 --> 00:04:05,920 I will export a constant which is a string array called 51 00:04:05,920 --> 00:04:12,380 contacttype which as I 52 00:04:12,380 --> 00:04:19,410 mentioned is a string array containing three strings here, 53 00:04:25,060 --> 00:04:29,460 none, Tel, and email. 54 00:04:29,750 --> 00:04:34,875 So, now our data model structure is ready. 55 00:04:34,875 --> 00:04:39,019 So, later on when we develop our server-side, 56 00:04:39,019 --> 00:04:45,555 we will be able to map this into a data that we store on the server-side. 57 00:04:45,555 --> 00:04:47,690 So, within our Angular application, 58 00:04:47,690 --> 00:04:53,705 this forms the data model that we're going to use for our application just like the dish, 59 00:04:53,705 --> 00:04:58,850 the leader, and the promotion that we have developed this is another class that 60 00:04:58,850 --> 00:05:04,375 enables us to group together a set of properties into a class here. 61 00:05:04,375 --> 00:05:06,380 So, once we have completed that, 62 00:05:06,380 --> 00:05:10,365 let's proceed ahead with creating the Reactive form. 63 00:05:10,365 --> 00:05:16,095 We're going to create the Reactive form in our contact component. 64 00:05:16,095 --> 00:05:20,780 So, let's go to the contact component.ts file, 65 00:05:20,780 --> 00:05:22,520 and also we're going to include 66 00:05:22,520 --> 00:05:26,400 the corresponding form in the contact components template file. 67 00:05:26,400 --> 00:05:29,475 So, in the contact components type script file, 68 00:05:29,475 --> 00:05:32,135 so this is where we're going to prepare our form 69 00:05:32,135 --> 00:05:35,555 as we saw the Reactive form is built mostly 70 00:05:35,555 --> 00:05:43,265 in the code and then thereafter mapped into the form elements in the template file. 71 00:05:43,265 --> 00:05:49,360 So, here I'm going to import a few classes. 72 00:05:49,360 --> 00:05:52,655 I'll import the FormBuilder, 73 00:05:52,655 --> 00:06:00,055 then FormBuilder, and validators. 74 00:06:00,055 --> 00:06:05,890 Validators would be used for form validation which will be in the next exercise, 75 00:06:05,890 --> 00:06:10,125 but I'll import them at the moment already. 76 00:06:10,125 --> 00:06:15,735 These are imported from the Angular forms library. 77 00:06:15,735 --> 00:06:19,300 So, once we import this, 78 00:06:19,300 --> 00:06:29,790 we will import the Feedback class and the contacttype constant 79 00:06:29,790 --> 00:06:38,360 from the shared/feedback file 80 00:06:38,360 --> 00:06:41,415 that we just created in the previous step. 81 00:06:41,415 --> 00:06:44,850 We need this within our application. 82 00:06:44,850 --> 00:06:49,455 Now, inside my class here, 83 00:06:49,455 --> 00:07:00,310 I'm going to declare a few variables called feedbackForm which is of the type FormGroup. 84 00:07:00,410 --> 00:07:07,475 This is the form model that is going to host 85 00:07:07,475 --> 00:07:11,960 the Reactive form here and then I will also 86 00:07:11,960 --> 00:07:17,270 declare a variable feedback of the type Feedback, 87 00:07:17,270 --> 00:07:19,745 so this would be the corresponding data model. 88 00:07:19,745 --> 00:07:27,930 Later on this Feedback value can be fetched from a server within our application, 89 00:07:27,930 --> 00:07:34,205 and then also I will declare the contacttype as a variable 90 00:07:34,205 --> 00:07:41,045 which is of the contacttype string array. 91 00:07:41,045 --> 00:07:44,860 Because I need to make use of this within our application. 92 00:07:44,860 --> 00:07:48,675 To construct the Reactive form within the constructor, 93 00:07:48,675 --> 00:07:58,605 I would inject the FormBuilder into the constructor here, 94 00:07:58,605 --> 00:08:03,605 and I would create a separate method called 95 00:08:03,605 --> 00:08:08,950 createForm which I will invoke within the constructor, 96 00:08:08,950 --> 00:08:12,300 so when this class is built the form will be created. 97 00:08:12,300 --> 00:08:17,870 So, the createForm will be a method within which I will create the actual form. 98 00:08:17,870 --> 00:08:24,060 So, let me add in the createForm method here. 99 00:08:24,060 --> 00:08:27,590 This is just convenience I could've simply 100 00:08:27,590 --> 00:08:31,250 included the code directly in the constructor itself, 101 00:08:31,250 --> 00:08:34,760 but you will see that there could be reasons why you 102 00:08:34,760 --> 00:08:41,060 might need to call this createForm from other locations. 103 00:08:41,060 --> 00:08:47,240 So, it is better off to put it into a separate method here. 104 00:08:47,240 --> 00:08:50,830 So, I will create the form here, Reactive form, 105 00:08:50,830 --> 00:08:56,775 and then put it into the feedbackForm variable that I have declared earlier. 106 00:08:56,775 --> 00:08:58,335 So, to create the form, 107 00:08:58,335 --> 00:09:02,215 I'm going to take the help of the FormBuilder, 108 00:09:02,215 --> 00:09:05,145 the FB that I have declared at the constructor, 109 00:09:05,145 --> 00:09:10,760 and then the FB provides a method called Group which allows me to 110 00:09:10,760 --> 00:09:16,910 define a group, a FormGroup here. 111 00:09:16,910 --> 00:09:23,040 So, within there, now I am going to construct the parts of the form there. 112 00:09:23,040 --> 00:09:24,845 So, within this group, 113 00:09:24,845 --> 00:09:28,775 now I can include the various form controls there. 114 00:09:28,775 --> 00:09:34,050 So, I would first put the first name, 115 00:09:34,050 --> 00:09:44,200 then last name. 116 00:09:45,910 --> 00:09:51,175 Note how the fields within my form are 117 00:09:51,175 --> 00:09:56,460 closely mirroring the fields within my feedback class. 118 00:09:56,460 --> 00:09:59,790 They don't have to exactly match, but if they match, 119 00:09:59,790 --> 00:10:01,630 then transferring the data between 120 00:10:01,630 --> 00:10:06,550 the data model and the four models becomes a lot more straightforward. 121 00:10:06,550 --> 00:10:12,500 Telnum which I'm gonna leave 'cause uh- 122 00:10:13,040 --> 00:10:15,800 I've added first name, last name, 123 00:10:15,800 --> 00:10:25,140 Telnum, email, and agree, and contact type, 124 00:10:25,550 --> 00:10:31,360 which I will set as none to begin with. 125 00:10:31,360 --> 00:10:35,710 Recall that the contact type is a string array containing three of them 126 00:10:35,710 --> 00:10:40,015 so you should choose one of them and then map it into this property here. 127 00:10:40,015 --> 00:10:44,920 So, I will choose this as none and then message, 128 00:10:44,920 --> 00:10:49,120 which will be the feedback that the user gives about 129 00:10:49,120 --> 00:10:53,605 our restaurant mapped into a string here. 130 00:10:53,605 --> 00:10:59,765 So, these are the various fields that will form part of our form here. 131 00:10:59,765 --> 00:11:04,370 So, once we have the form's structure in place here, 132 00:11:04,370 --> 00:11:07,525 so you notice that when this method is called, 133 00:11:07,525 --> 00:11:12,455 this form will be the reactive form will be created in the code here. 134 00:11:12,455 --> 00:11:16,595 Now, we need to map this into the view, 135 00:11:16,595 --> 00:11:17,900 into the template there. 136 00:11:17,900 --> 00:11:21,470 So, we're going to do that in the next step. 137 00:11:21,470 --> 00:11:26,130 So, now, going to our template file, 138 00:11:26,130 --> 00:11:31,415 in the contact component template file, 139 00:11:31,415 --> 00:11:36,159 we will scroll down and then include this into 140 00:11:36,159 --> 00:11:42,910 our template file right after this div here, 141 00:11:42,910 --> 00:11:50,325 so we have this div in our contact view that contains the location information and so on. 142 00:11:50,325 --> 00:11:54,510 Right after that, I'm going to create another div inside 143 00:11:54,510 --> 00:11:59,820 which we will host the reactive form there. 144 00:11:59,820 --> 00:12:17,720 Let me apply a few flex layout things 145 00:12:17,720 --> 00:12:19,100 here to my div. 146 00:12:19,100 --> 00:12:22,110 Now, this form size as you can see should be 147 00:12:22,110 --> 00:12:25,905 a CSS class that I will create a little bit later. 148 00:12:25,905 --> 00:12:31,540 Inside this div, I'm going to host my form. 149 00:12:31,540 --> 00:12:36,680 So, once I put this div into my template file, 150 00:12:36,680 --> 00:12:40,180 now let me start out with a heading for this. 151 00:12:40,180 --> 00:12:47,675 So, we'll say, "Send us your feedback." 152 00:12:47,675 --> 00:12:54,250 So, you are seeking the feedback from visitors to your site. 153 00:12:54,950 --> 00:12:58,050 We'll start constructing the form. 154 00:12:58,050 --> 00:13:03,200 So, let me start out with the form tag 155 00:13:03,200 --> 00:13:08,275 here and then we'll build out the form inside this form tag here. 156 00:13:08,275 --> 00:13:12,180 So, for the form, the first thing that I will do is apply 157 00:13:12,180 --> 00:13:16,535 the no validate because the validation will be taken care of by angular, 158 00:13:16,535 --> 00:13:21,380 and then also apply a form group here. 159 00:13:21,380 --> 00:13:38,060 So, notice that this form group is the one that will tie me into the reactive form model 160 00:13:38,060 --> 00:13:40,555 that I created in my code here. 161 00:13:40,555 --> 00:13:42,380 So, by doing this, 162 00:13:42,380 --> 00:13:47,255 we are tying in this reactive form in the template to 163 00:13:47,255 --> 00:13:53,680 the corresponding form model in our typescript file there. 164 00:13:53,680 --> 00:13:59,100 So, the way we do that is we declare the form group and feedback form. 165 00:13:59,100 --> 00:14:00,910 I'll show you how you tie in 166 00:14:00,910 --> 00:14:04,840 the remaining form elements to 167 00:14:04,840 --> 00:14:09,315 the corresponding properties in the form model in a short while. 168 00:14:09,315 --> 00:14:11,325 So, after we do this, 169 00:14:11,325 --> 00:14:20,480 let's put in our form elements into place inside this form model. 170 00:14:20,480 --> 00:14:24,490 So, I will declare a P around here and then inside there I 171 00:14:24,490 --> 00:14:28,860 will use the mat-form-field here, 172 00:14:28,860 --> 00:14:35,475 to which I will apply a CSS class called Half-width, 173 00:14:35,475 --> 00:14:39,600 and close this off. 174 00:14:39,600 --> 00:14:45,195 So, this would put my first form control into place here. 175 00:14:45,195 --> 00:14:55,930 So, in here, I will put the input and then apply the MatInput from angular material here. 176 00:14:56,930 --> 00:15:03,530 To tie this into the property inside my form model, 177 00:15:03,530 --> 00:15:08,630 I would need to do FormControlName, 178 00:15:09,980 --> 00:15:14,650 and the first one is first name. 179 00:15:14,650 --> 00:15:20,370 So, that way, this input is now tied into the first name property 180 00:15:20,370 --> 00:15:26,015 that I have defined inside my form model that I have defined in the code. 181 00:15:26,015 --> 00:15:29,680 The first name, and then I will define 182 00:15:29,680 --> 00:15:37,900 the placeholder as first name. 183 00:15:37,900 --> 00:15:39,970 So, as you would expect, 184 00:15:39,970 --> 00:15:43,685 this input field is going to be used to type in 185 00:15:43,685 --> 00:15:51,215 the first name by the user, type text. 186 00:15:51,215 --> 00:15:56,935 Interestingly, you see that we don't have the ng-model here 187 00:15:56,935 --> 00:16:02,950 or any of the template variables and so on in my form anymore. 188 00:16:02,950 --> 00:16:05,945 Reactive forms operate differently. 189 00:16:05,945 --> 00:16:08,480 So, as you see in reactive forms, 190 00:16:08,480 --> 00:16:11,975 you map the form group and then you try the form control names. 191 00:16:11,975 --> 00:16:16,095 If you are creating form controls with the form control class, 192 00:16:16,095 --> 00:16:20,440 you would declare this as form control within square brackets and then match 193 00:16:20,440 --> 00:16:24,910 it with the corresponding form control that you create in your type skeptical. 194 00:16:24,910 --> 00:16:28,940 But now since we are using the form builder, 195 00:16:28,940 --> 00:16:33,280 I am only needed to tie in the form group like 196 00:16:33,280 --> 00:16:38,605 this in my form to the corresponding form model, 197 00:16:38,605 --> 00:16:39,890 and then the rest of them, 198 00:16:39,890 --> 00:16:42,690 I declare as form control name and then match them to 199 00:16:42,690 --> 00:16:45,085 the corresponding properties in 200 00:16:45,085 --> 00:16:48,995 the form control model that I have in my typescript the code way. 201 00:16:48,995 --> 00:16:53,950 So, this will create the first name field there. 202 00:16:53,950 --> 00:16:56,400 Let me copy this. 203 00:16:56,400 --> 00:17:00,150 I need a last name here. 204 00:17:00,150 --> 00:17:07,005 So, I'm going to copy this and then say form control name is Last Name, 205 00:17:07,005 --> 00:17:10,510 and the placeholder is Last Name, 206 00:17:10,510 --> 00:17:12,550 and of the type, Text, here. 207 00:17:12,550 --> 00:17:18,975 I had first name, 208 00:17:18,975 --> 00:17:24,970 I had last name and if you look at the form control model, 209 00:17:24,970 --> 00:17:27,400 you will see that after first name and last name, 210 00:17:27,400 --> 00:17:31,770 I have the telephone number as the next one, 211 00:17:31,770 --> 00:17:34,325 so I'm going to paste this in here. 212 00:17:34,325 --> 00:17:38,390 Then, the form control name here is Telnum, 213 00:17:38,390 --> 00:17:46,920 and the placeholder is Telephone Number, 214 00:17:46,920 --> 00:17:51,405 and the type is Tel. 215 00:17:51,405 --> 00:17:53,385 While we're at it, 216 00:17:53,385 --> 00:17:59,905 I will tie in the Required into these although that is not really required. 217 00:17:59,905 --> 00:18:08,275 But let me just add that in there. 218 00:18:08,275 --> 00:18:11,920 Now, telephone number then I have email. 219 00:18:11,920 --> 00:18:20,679 So, the next field is Email, 220 00:18:25,520 --> 00:18:32,100 and the placeholder is Email, 221 00:18:32,100 --> 00:18:35,510 and the type is also. 222 00:18:35,510 --> 00:18:38,600 So, now I have first, 223 00:18:38,600 --> 00:18:41,610 last name, and telephone number, and email. 224 00:18:41,610 --> 00:18:52,820 The next thing that I'm going to add in is a slide toggle. 225 00:18:53,850 --> 00:18:56,600 Earlier we use the checkbox. 226 00:18:56,600 --> 00:19:03,240 The slidetoggle is another form control that angular material provides, 227 00:19:03,240 --> 00:19:07,150 which is somewhat different looking than the checkbox and 228 00:19:07,150 --> 00:19:11,480 I thought that I'll illustrate with to you by using it in the form here. 229 00:19:11,480 --> 00:19:18,680 Now, this is where I will use a table to position these elements. 230 00:19:19,890 --> 00:19:22,300 The reason is that, 231 00:19:22,300 --> 00:19:25,520 these elements are hard to position without using a table. 232 00:19:25,520 --> 00:19:27,605 So, inside the table, 233 00:19:27,605 --> 00:19:31,740 I'm sure you all know how to use table, 234 00:19:35,280 --> 00:19:39,740 I tried to position them using the 235 00:19:39,740 --> 00:19:44,970 standard flex layout and was not very successful with that. 236 00:19:44,970 --> 00:19:50,510 So, instead I resorted to using a table to position these two items in my form. 237 00:19:50,510 --> 00:19:54,350 So, mat-slide-toggle. 238 00:19:54,350 --> 00:19:57,680 So, the slidetoggle is like the checkbox, 239 00:19:57,680 --> 00:20:00,390 you can turn it on and off, 240 00:20:00,390 --> 00:20:04,550 and this is allowed to select a Boolean value here. 241 00:20:04,550 --> 00:20:14,200 So, slidetoggle and the formControlName is agree. 242 00:20:14,200 --> 00:20:16,140 If you remember, we had agree, 243 00:20:16,140 --> 00:20:22,925 which was a Boolean property in the form control. 244 00:20:22,925 --> 00:20:25,735 Then, for this, I would say, 245 00:20:25,735 --> 00:20:29,340 may we contact you? 246 00:20:29,340 --> 00:20:35,140 Now, it'll become clearer to you when you see the final version of 247 00:20:35,140 --> 00:20:43,060 this form to understand why we are doing this. 248 00:20:43,060 --> 00:20:49,895 Right now, we'll just put in all the parts into my reactive form here. 249 00:20:49,895 --> 00:20:55,925 The second part I'm going to use a select, 250 00:20:55,925 --> 00:21:03,920 which is supported through the mat-select component in angular material. 251 00:21:03,920 --> 00:21:12,460 So, MD select and for this the placeholder, 252 00:21:13,520 --> 00:21:21,690 I will define as ''How?'', 253 00:21:21,690 --> 00:21:27,580 and formControlName with which I'm going to tie this is 254 00:21:27,580 --> 00:21:37,650 ''contacttype'' and close the MD select. 255 00:21:37,650 --> 00:21:41,720 So, this allows me to create a select element in my form. 256 00:21:41,720 --> 00:21:44,660 So, the select element is something that gives me 257 00:21:44,660 --> 00:21:48,535 a pull down list from which I can select one of them. 258 00:21:48,535 --> 00:21:50,905 So, to create the pull-down list, 259 00:21:50,905 --> 00:22:00,510 I'm going to use the mat-option that is available as a component in angular material. 260 00:22:00,510 --> 00:22:05,035 So, the mat-option is included inside the mat-select. 261 00:22:05,035 --> 00:22:06,810 So, for the option, 262 00:22:06,810 --> 00:22:09,570 I'm going to do *ngFor, 263 00:22:09,570 --> 00:22:17,070 and I'm sure you remember the ngFor directive from earlier, 264 00:22:17,070 --> 00:22:24,750 *ngFor ''Let ctype of contactType.'' 265 00:22:24,750 --> 00:22:28,360 Now, you see why I declared the contact type variable 266 00:22:28,360 --> 00:22:44,740 in my code earlier and then I would say, [value] = ''ctype." 267 00:22:44,740 --> 00:23:00,840 So, I'm setting up my option in my select here and using interpolation, 268 00:23:00,840 --> 00:23:03,040 I'll type ctype in here. 269 00:23:03,040 --> 00:23:10,100 So, that will give me a pulldown option menu in my form there. 270 00:23:10,100 --> 00:23:14,665 So, that is the next part and then finally, 271 00:23:14,665 --> 00:23:21,270 after the table, I'm going to put in a text area here. 272 00:23:21,270 --> 00:23:31,320 So, I would say p and close off that P. For styling the reactive form, 273 00:23:31,320 --> 00:23:35,395 the P element allows me to position the items properly. 274 00:23:35,395 --> 00:23:37,580 So, that's why I'm using that. 275 00:23:37,580 --> 00:23:42,380 So, as you recall, 276 00:23:42,540 --> 00:23:48,740 mat-form-field allows me to 277 00:23:48,740 --> 00:23:56,239 include an input container here and then inside there I'm going to define a text area, 278 00:23:56,239 --> 00:24:00,310 which I apply 279 00:24:00,310 --> 00:24:08,650 the matInput directive to that. 280 00:24:08,650 --> 00:24:15,460 Then, the formControlName, I'm going to give as ''message''. 281 00:24:15,460 --> 00:24:23,290 So, this particular form element allows the user to type 282 00:24:23,290 --> 00:24:31,305 in the feedback message for my restaurant. 283 00:24:31,305 --> 00:24:37,100 So, placeholder ''Your Feedback'', 284 00:24:37,100 --> 00:24:42,610 and then I will give the text area a size of 285 00:24:42,610 --> 00:24:51,245 12 rows here and then close off the text area. 286 00:24:51,245 --> 00:24:58,005 So, here we have a text area with the 12 rows. 287 00:24:58,005 --> 00:25:03,350 So, that completes most of the form. 288 00:25:03,350 --> 00:25:07,910 Sorry, this should be outside the table. 289 00:25:08,070 --> 00:25:11,830 We need a button to submit the form. 290 00:25:11,830 --> 00:25:20,755 So, right there, I will include a button of the type=''submit'' and 291 00:25:20,755 --> 00:25:24,155 this submit button I will apply 292 00:25:24,155 --> 00:25:32,270 the mat-button and also apply the class="background-primary''. 293 00:25:33,600 --> 00:25:42,770 You have seen me applying this to the button in the previous exercise also, 294 00:25:42,770 --> 00:25:45,740 similar kind of button. 295 00:25:45,740 --> 00:25:48,510 So, now my form is almost ready. 296 00:25:48,510 --> 00:25:54,455 You could add in a few CSS classes to the contact component. 297 00:25:54,455 --> 00:25:58,725 The three classes that I have used is full-width, 298 00:25:58,725 --> 00:26:06,420 this is used to set the size of the elements there. 299 00:26:06,420 --> 00:26:10,980 So, full-width 95 percent, half-width. 300 00:26:11,200 --> 00:26:17,565 So, this allows me to size the elements correctly, 301 00:26:17,565 --> 00:26:23,930 45 percent half-width and then form-size. 302 00:26:26,400 --> 00:26:32,740 So, I use these CSS classes in my form. 303 00:26:32,740 --> 00:26:38,230 So with this, let's save the changes, 304 00:26:38,460 --> 00:26:44,150 and take a quick look at the form in our application. 305 00:26:44,150 --> 00:26:45,915 Going to the browser, 306 00:26:45,915 --> 00:26:48,725 in the contact view, 307 00:26:48,725 --> 00:26:54,210 as you scroll down you now see the form in place in the contact view here. 308 00:26:54,210 --> 00:26:57,660 So, you see the send us your feedback, 309 00:26:57,660 --> 00:27:01,985 the first name, the last name, the telephone number, 310 00:27:01,985 --> 00:27:06,695 the email and the slide toggle here, 311 00:27:06,695 --> 00:27:12,395 so you see the slide toggle in place there and then this is this select. 312 00:27:12,395 --> 00:27:15,650 The select allows me to select one of these three. 313 00:27:15,650 --> 00:27:20,415 The default value is none and then the text area here, 314 00:27:20,415 --> 00:27:25,675 allows me to type in my feedback comments here and then the submit button. 315 00:27:25,675 --> 00:27:28,940 So, this completes the reactive form in 316 00:27:28,940 --> 00:27:32,690 my application but when you click on the Submit button, 317 00:27:32,690 --> 00:27:35,000 you won't to be able to submit this form. 318 00:27:35,000 --> 00:27:39,480 So, we need to add the ngSubmit to our form in the template 319 00:27:39,480 --> 00:27:44,485 and then add a method in our type script file. 320 00:27:44,485 --> 00:27:47,185 Going to our code, 321 00:27:47,185 --> 00:27:49,315 to the form here, 322 00:27:49,315 --> 00:27:53,830 along with the form novalidate FormGroup, 323 00:27:53,830 --> 00:28:01,670 I'm going to add in an ngSubmit to the form. 324 00:28:02,730 --> 00:28:10,025 I'll call the method as onSubmit method. 325 00:28:10,025 --> 00:28:14,155 So with this, my form is now ready to submit information. 326 00:28:14,155 --> 00:28:17,195 I need to go into the contact components, 327 00:28:17,195 --> 00:28:25,380 type script file and then create the onSubmit method here. 328 00:28:25,380 --> 00:28:28,420 So, in the onSubmit method, 329 00:28:31,450 --> 00:28:37,030 it so happens that the form model is exactly the same as the data models, 330 00:28:37,030 --> 00:28:45,790 so I can simply take the value of the form model. 331 00:28:45,790 --> 00:28:49,840 So, when you have a form model like this Feedback form, 332 00:28:49,840 --> 00:28:54,410 the feedback form gives a property called value, 333 00:28:54,410 --> 00:29:00,020 which allows me to retrieve the current value of all these from my feedback form. 334 00:29:00,020 --> 00:29:03,810 So this will form a JavaScript object, 335 00:29:03,810 --> 00:29:06,740 which I can then map into the feedback JavaScript object. 336 00:29:06,740 --> 00:29:10,170 It so happens that, both of these have exactly the same structure, 337 00:29:10,170 --> 00:29:11,690 the data model and the form model. 338 00:29:11,690 --> 00:29:14,140 So, that's why I'm able to quickly load in the value 339 00:29:14,140 --> 00:29:18,120 directly into the data model when the user submits the form. 340 00:29:18,120 --> 00:29:21,120 If your data model is somewhat different from the form model, 341 00:29:21,120 --> 00:29:24,460 you need to map in individual properties explicitly and 342 00:29:24,460 --> 00:29:28,890 that can be done inside this method there. 343 00:29:29,610 --> 00:29:36,455 Just to show you that the form is submitted correctly, 344 00:29:36,455 --> 00:29:44,760 I'm going to log the value to the console, the JavaScript console. 345 00:29:44,760 --> 00:29:50,200 Then I would say, this.feedbackForm.reset. 346 00:29:51,320 --> 00:30:00,405 The reset method allows you to reset the form to its normal state, 347 00:30:00,405 --> 00:30:03,000 removing all the entries that you have done in the form. 348 00:30:03,000 --> 00:30:05,480 So, once the user submits, 349 00:30:05,480 --> 00:30:09,030 you would normally capture the values and then reset the form so 350 00:30:09,030 --> 00:30:14,365 that further input can be done as a separate form. 351 00:30:14,365 --> 00:30:17,450 So that's the reset method that we will use here. 352 00:30:17,450 --> 00:30:19,265 So with these changes, 353 00:30:19,265 --> 00:30:23,900 let's save the changes and then go and see our form in action. 354 00:30:23,900 --> 00:30:30,080 One last little thing that I want to add to my template is to show 355 00:30:30,080 --> 00:30:36,200 you the form values inside my form itself, 356 00:30:36,200 --> 00:30:38,230 although in a real application, 357 00:30:38,230 --> 00:30:42,580 you wouldn't be doing this but I just wanted to illustrate to you how 358 00:30:42,580 --> 00:30:47,165 you can see the feedbackForm's values directly here, 359 00:30:47,165 --> 00:30:49,095 from the feedbackForm model. 360 00:30:49,095 --> 00:30:52,395 So, I can do inside here. 361 00:30:52,395 --> 00:31:02,625 I can say feedbackForm.value and piped through json to show here. 362 00:31:02,625 --> 00:31:08,435 Similarly, I can do here, feedbackForm. 363 00:31:08,435 --> 00:31:15,840 There is another property associated with that form model called status, 364 00:31:15,840 --> 00:31:20,440 which shows me the status of the form at this moment, 365 00:31:20,440 --> 00:31:22,265 whether it is valid or invalid. 366 00:31:22,265 --> 00:31:26,900 So, I'm going to add these two into my form here, 367 00:31:26,900 --> 00:31:30,285 so that this will be shown in my template. 368 00:31:30,285 --> 00:31:34,670 This is just to give you instantaneous view of what 369 00:31:34,670 --> 00:31:41,620 the form model contains in my type script file. 370 00:31:42,460 --> 00:31:47,590 Let's save the changes and go and take a quick look at our form. 371 00:31:47,590 --> 00:31:50,325 Getting back to our browser, 372 00:31:50,325 --> 00:31:55,630 you can now see that the form values are being shown 373 00:31:55,630 --> 00:32:04,460 here and the form is in good form to enable us to type in the values. 374 00:32:04,460 --> 00:32:08,660 So let's type in some random values here and you can 375 00:32:08,660 --> 00:32:14,090 immediately see the value is being reflected in the feedbackForm model there, 376 00:32:14,090 --> 00:32:24,020 right at the top and email. 377 00:32:26,050 --> 00:32:29,295 Doesn't matter, just type in something. 378 00:32:29,295 --> 00:32:31,680 Then, this toggle switch, 379 00:32:31,680 --> 00:32:34,575 you can see that when you turn it on and off, 380 00:32:34,575 --> 00:32:39,385 the agree turn changes from false to true. 381 00:32:39,385 --> 00:32:43,030 So let me leave it at true and then the select. 382 00:32:43,030 --> 00:32:50,640 Let me select email and then you see that the contact type here has changed to email. 383 00:32:50,640 --> 00:32:56,060 So, this is how you would select to change the value. 384 00:32:56,060 --> 00:33:00,575 So, let's say email and then in here, 385 00:33:00,575 --> 00:33:01,940 we can type in the message. 386 00:33:01,940 --> 00:33:05,960 Some random text here and you would be 387 00:33:05,960 --> 00:33:10,675 able to see that the random text is reflected in the message there. 388 00:33:10,675 --> 00:33:12,690 Let's submit the form. 389 00:33:12,690 --> 00:33:16,680 So, when you click on the Submit you immediately see in the console, 390 00:33:16,680 --> 00:33:20,605 the value being printed out here, 391 00:33:20,605 --> 00:33:21,870 in this object here. 392 00:33:21,870 --> 00:33:27,155 So can you can browse to see all the properties for that object, 393 00:33:27,155 --> 00:33:31,050 the feedback form model. 394 00:33:31,050 --> 00:33:38,210 So, this is an illustration of a reactive form within our application. 395 00:33:38,210 --> 00:33:41,850 This completes this exercise. 396 00:33:41,850 --> 00:33:44,800 In this exercise, we have seen how we can create 397 00:33:44,800 --> 00:33:47,910 a reactive form within our Angular application. 398 00:33:47,910 --> 00:33:52,910 This is also a good point at which you can do a Git commit with the message, 399 00:33:52,910 --> 00:33:55,670 reactive forms part one.