1 00:00:03,890 --> 00:00:09,395 We have just learnt about Angular support for forms, 2 00:00:09,395 --> 00:00:12,125 and in particular, the template-driven form. 3 00:00:12,125 --> 00:00:17,520 In this exercise, we will create a template-driven form and then include that 4 00:00:17,520 --> 00:00:23,375 into our login component dialogue that we created in the previous exercise. 5 00:00:23,375 --> 00:00:29,580 In this lecture the template-driven form that we create, 6 00:00:29,580 --> 00:00:34,850 enables the user to type in their username and password into the login form, 7 00:00:34,850 --> 00:00:37,700 and then submit this information to our application. 8 00:00:37,700 --> 00:00:41,825 Now, how this information is processed by the server side, 9 00:00:41,825 --> 00:00:44,990 that is left to a later course. 10 00:00:44,990 --> 00:00:49,310 But for the moment, we have a way of capturing the username and password 11 00:00:49,310 --> 00:00:54,285 submitted by the user through the login template-driven form, 12 00:00:54,285 --> 00:00:58,210 which we will design in this exercise. 13 00:00:58,210 --> 00:01:01,115 Proceeding with the exercise, 14 00:01:01,115 --> 00:01:05,030 the first step to be able to leverage the use 15 00:01:05,030 --> 00:01:08,890 of template-driven forms is to go to app module.ts 16 00:01:08,890 --> 00:01:17,140 file and then import a few supporting modules for our application. 17 00:01:17,140 --> 00:01:20,764 So, the first thing that I'm going to import is 18 00:01:20,764 --> 00:01:33,155 the MatFormFieldModule from Angular 19 00:01:33,155 --> 00:01:38,085 material form field. 20 00:01:38,085 --> 00:01:44,600 So, this enables us to group together a bunch of items into a form field there. 21 00:01:44,600 --> 00:01:52,190 Then, we'll also import the MatInputModule. 22 00:01:52,190 --> 00:01:58,100 The input module supports the input component which is 23 00:01:58,100 --> 00:02:03,650 a stylized Angular Material component 24 00:02:03,650 --> 00:02:09,690 that supports the input form field from HTML forms here. 25 00:02:09,690 --> 00:02:15,520 Then, also, let me import a MatCheckbox, 26 00:02:18,680 --> 00:02:29,895 the corresponding module from Angular Material checkbox. 27 00:02:29,895 --> 00:02:32,690 So, these three support 28 00:02:32,690 --> 00:02:36,410 three form elements that we're going to use when we create our application. 29 00:02:36,410 --> 00:02:42,420 The form field module enables us to group together a bunch of form elements there. 30 00:02:42,420 --> 00:02:46,240 The input module enables us to create an input field in there. 31 00:02:46,240 --> 00:02:48,460 The checkbox module, as you would expect, 32 00:02:48,460 --> 00:02:50,570 enables us to create a checkbox. 33 00:02:50,570 --> 00:02:53,670 In addition, I also need to import 34 00:02:53,670 --> 00:03:06,190 the FormsModule from Angular forms. 35 00:03:06,190 --> 00:03:10,130 The FormsModule is the one that supports forms in Angular. 36 00:03:10,130 --> 00:03:12,445 This is the one that supports template-driven forms. 37 00:03:12,445 --> 00:03:15,280 So, now that we have imported these, obviously, 38 00:03:15,280 --> 00:03:23,775 the next step is to go into the NgModule decorator and then pull these into place here. 39 00:03:23,775 --> 00:03:30,560 So, we'll go in here and then input the FormsModule. 40 00:03:30,660 --> 00:03:38,200 Let me input the FormFieldModule, 41 00:03:38,200 --> 00:03:45,075 the InputModule, the CheckboxModule in here. 42 00:03:45,075 --> 00:03:49,325 Then, now my app module is ready 43 00:03:49,325 --> 00:03:55,125 to support the use of template-driven forms in our application. 44 00:03:55,125 --> 00:03:57,485 Now that we have completed this, 45 00:03:57,485 --> 00:03:59,530 let's go to the login component. 46 00:03:59,530 --> 00:04:02,320 Much of our work is in the login component. 47 00:04:02,320 --> 00:04:04,090 Let me first design the form. 48 00:04:04,090 --> 00:04:07,975 So, going into the login component template file, 49 00:04:07,975 --> 00:04:14,345 let me add in the template for our form to create the form here. 50 00:04:14,345 --> 00:04:16,190 So, at the top, 51 00:04:16,190 --> 00:04:25,940 I will create a p 52 00:04:25,940 --> 00:04:30,715 which will display the information that I typed into the form. 53 00:04:30,715 --> 00:04:36,750 In the code, we will have a JavaScript variable called user, 54 00:04:36,750 --> 00:04:41,175 which will be tied in to the fields in this form. 55 00:04:41,175 --> 00:04:42,500 Now, when we create that, 56 00:04:42,500 --> 00:04:43,690 then will become more clear. 57 00:04:43,690 --> 00:04:45,490 Now, here, by including this, 58 00:04:45,490 --> 00:04:50,100 what I am enabling is to show the changes. 59 00:04:50,100 --> 00:04:52,990 As we type in information into the form, 60 00:04:52,990 --> 00:04:56,390 the corresponding changes that happen in the code to 61 00:04:56,390 --> 00:05:00,880 reflect the form state can be shown right there. 62 00:05:00,880 --> 00:05:04,500 Now, in addition, now I'm going to create the form here. 63 00:05:04,500 --> 00:05:07,210 So, we'll go in and then add the form element here. 64 00:05:07,210 --> 00:05:09,470 To this form element, 65 00:05:09,470 --> 00:05:11,000 I'm going to apply 66 00:05:11,000 --> 00:05:15,260 the novalidate attribute here because 67 00:05:15,260 --> 00:05:19,625 we want the form validation to be taken care of by Angular and not 68 00:05:19,625 --> 00:05:28,820 by the standard HTML form validation 69 00:05:28,820 --> 00:05:30,230 that browser support. 70 00:05:30,230 --> 00:05:38,810 So, we're going to shift that responsibility into our Angular application itself. 71 00:05:38,810 --> 00:05:44,800 So, that's why I specify the novalidate attribute for my phone. 72 00:05:44,800 --> 00:05:47,310 So, that creates my form here. 73 00:05:47,310 --> 00:05:53,720 Inside here, I'm going to use the mat-dialog-content. 74 00:05:53,790 --> 00:05:58,360 Now, the mat-dialog-content, as you would expect, 75 00:05:58,360 --> 00:06:03,740 is an area which contains the content of the dialog itself. 76 00:06:03,740 --> 00:06:06,970 So, that's why we put that mat-dialog-content in here. 77 00:06:06,970 --> 00:06:14,265 Then, in here, I'm going to create my form here. 78 00:06:14,265 --> 00:06:16,675 So, I put a p there. 79 00:06:16,675 --> 00:06:23,915 Inside that p, I will use a mat-form-field here. 80 00:06:23,915 --> 00:06:28,805 So, the mat-form-field enables me to group together a set 81 00:06:28,805 --> 00:06:33,845 of form-related elements that I use together. 82 00:06:33,845 --> 00:06:39,765 So, in here, I will put in the input here. 83 00:06:39,765 --> 00:06:44,505 So, the input form field from HTML file forms. 84 00:06:44,505 --> 00:06:50,255 Then, to this, I will apply the matInput attribute 85 00:06:50,255 --> 00:06:57,360 which will enable us to apply the material design styling for this input. 86 00:06:57,360 --> 00:07:04,635 Then, we will give a placeholder for this as username, 87 00:07:04,635 --> 00:07:06,569 and as you would expect, 88 00:07:06,569 --> 00:07:12,220 and the type will be text type here. 89 00:07:15,140 --> 00:07:19,830 Let me add in the ngModel. 90 00:07:19,830 --> 00:07:30,000 So, a template-driven form is supported through the ngModel attribute here. 91 00:07:30,000 --> 00:07:31,520 So, with the ngModel. 92 00:07:31,520 --> 00:07:36,130 So, you can see the banana inbox way of declaring this. 93 00:07:36,130 --> 00:07:40,270 Then, we'll say user.username. 94 00:07:40,270 --> 00:07:48,345 So, this user is going to be a JavaScript object in my TypeScript file, 95 00:07:48,345 --> 00:07:52,440 which will contain a username property there, 96 00:07:52,440 --> 00:07:58,540 which will track the value that you input into this input field in my form there. 97 00:07:58,540 --> 00:08:06,320 So, that's why we are tying this input field information into this JavaScript object. 98 00:08:06,320 --> 00:08:08,890 So, this is the two-way data binding that we are doing 99 00:08:08,890 --> 00:08:13,250 between the form element and the corresponding JavaScript code. 100 00:08:13,250 --> 00:08:19,640 Then, we'll give this a name as username here. 101 00:08:19,640 --> 00:08:24,495 So, that is my first form fields that I've added in here. 102 00:08:24,495 --> 00:08:29,330 Now, similarly, I will add in the second form field for the password. 103 00:08:29,330 --> 00:08:36,255 So, for that, let me just copy this and then paste it down here. 104 00:08:36,255 --> 00:08:41,820 So, the second field would be Input, matInput, 105 00:08:41,820 --> 00:08:47,760 placeholder is password, 106 00:08:47,760 --> 00:08:52,360 and then the type is password. 107 00:08:52,360 --> 00:09:01,385 So, the password input element from HTML5 form support. 108 00:09:01,385 --> 00:09:11,050 The ngModel itself will be tied into user password and the name would be password. 109 00:09:11,050 --> 00:09:16,335 So, you see that the user JavaScript object now contains two properties, 110 00:09:16,335 --> 00:09:20,700 username and password, which will track the user's credentials here. 111 00:09:20,700 --> 00:09:24,995 So, these two form fields inside this p here, 112 00:09:24,995 --> 00:09:27,740 and then also we will add in one 113 00:09:27,740 --> 00:09:35,795 more called as mat-checkbox. 114 00:09:35,795 --> 00:09:41,050 You saw that we had included the checkbox module earlier. 115 00:09:41,050 --> 00:09:43,290 So, we're going to add in this. 116 00:09:43,290 --> 00:09:48,735 Now, this checkbox which when ticked will inform 117 00:09:48,735 --> 00:09:55,990 my Angular application that the username and password should be saved in the application. 118 00:09:55,990 --> 00:10:01,220 So, let me tie this in with the NG model to 119 00:10:01,220 --> 00:10:09,730 a corresponding property called remember in the user object. 120 00:10:09,730 --> 00:10:11,060 So, this will be, 121 00:10:11,060 --> 00:10:14,020 this property will be either true or false depending on 122 00:10:14,020 --> 00:10:17,315 whether the checkbox is ticked or unticked. 123 00:10:17,315 --> 00:10:19,830 So, that's the way we track. 124 00:10:19,830 --> 00:10:24,795 So, we are doing the two-way data binding between this checkbox and 125 00:10:24,795 --> 00:10:32,330 this property called remember of the user JavaScript object in my code there. 126 00:10:32,330 --> 00:10:36,260 Then the name would be remember, 127 00:10:36,260 --> 00:10:43,590 and then we'll give this a label as remember me. 128 00:10:43,850 --> 00:10:46,620 So, when the user checks this, 129 00:10:46,620 --> 00:10:50,200 then the user's information will be remembered in here. 130 00:10:50,200 --> 00:10:52,410 So, that's the mat-checkbox that we have added. 131 00:10:52,410 --> 00:10:54,270 So, we have three fields here, 132 00:10:54,270 --> 00:10:56,585 the username, the password, 133 00:10:56,585 --> 00:11:02,880 and then a checkbox here in my form here. 134 00:11:02,880 --> 00:11:06,090 So, this is a mat-dialogue content here. 135 00:11:06,090 --> 00:11:08,800 Now, in addition to the mat-dialogue content, 136 00:11:08,800 --> 00:11:14,985 I can also add mat-dialogue actions here. 137 00:11:14,985 --> 00:11:23,820 Now, the dialog actions can contain the buttons that correspond to this dialog. 138 00:11:23,820 --> 00:11:28,145 So, this is what will act as the action buttons in the dialogue, 139 00:11:28,145 --> 00:11:32,210 and also since they are enclosed inside the form, 140 00:11:32,210 --> 00:11:36,485 these buttons will also act as form submission buttons for me. 141 00:11:36,485 --> 00:11:44,530 So, in here, let me do a span class flex spacer, 142 00:11:46,580 --> 00:11:52,670 and then let me add in a button, 143 00:11:55,950 --> 00:12:02,140 mat-button, and then this button, 144 00:12:02,140 --> 00:12:07,090 I will also turn that into a mat-dialog close button. 145 00:12:07,090 --> 00:12:12,115 So, this would be a cancel button that I will include in my form here, 146 00:12:12,115 --> 00:12:14,925 then this is clicked the dialogue will be dismissed, 147 00:12:14,925 --> 00:12:17,960 and essentially which means that you're not submitting the form there. 148 00:12:17,960 --> 00:12:20,505 So, that also acts as the cancel button for the form, 149 00:12:20,505 --> 00:12:23,595 and then also dismissing the dialogue at the same time. 150 00:12:23,595 --> 00:12:27,180 So, by using this attribute to this button, 151 00:12:27,180 --> 00:12:31,595 we are declaring this as the button that dismisses the fault, 152 00:12:31,595 --> 00:12:36,940 the same way that we have this button in the toolbar. 153 00:12:36,940 --> 00:12:38,990 So, the mat-dialog close there. 154 00:12:38,990 --> 00:12:42,470 Then other button that we will have is 155 00:12:42,470 --> 00:12:49,490 for submit so that 156 00:12:49,490 --> 00:12:55,030 this button type would be the submit button inside a form there. 157 00:12:55,030 --> 00:12:56,315 So, when this is clicked, 158 00:12:56,315 --> 00:13:01,495 that triggers the form submission for this form here, 159 00:13:01,495 --> 00:13:06,420 and then let me add in a class to this, 160 00:13:06,420 --> 00:13:13,795 we will say background primary, and text floral. 161 00:13:13,795 --> 00:13:19,345 These classes I have already added into my styles.ACSS file there. 162 00:13:19,345 --> 00:13:24,800 So, text floral white, 163 00:13:24,800 --> 00:13:31,620 and this button would be labeled as the login button there. 164 00:13:31,620 --> 00:13:36,090 So, this would be a blue colored button that will be shown in the screen there. 165 00:13:36,090 --> 00:13:43,275 So, with this, my form structure is created in the template there. 166 00:13:43,275 --> 00:13:49,355 Now, the next step is to go into the code and then handle the form submission itself. 167 00:13:49,355 --> 00:13:54,070 So, now going to login component.ts file, 168 00:13:54,070 --> 00:13:57,400 we need to handle the form submission here. 169 00:13:57,400 --> 00:14:02,070 Now, the first step that I'm going to do is when this login component is created, 170 00:14:02,070 --> 00:14:12,110 we will create a user object here with the properties username, 171 00:14:12,110 --> 00:14:16,550 which would be an empty string to begin with, 172 00:14:16,610 --> 00:14:22,570 password which will also be an empty string to begin with, 173 00:14:22,570 --> 00:14:27,050 and then remember which is false. 174 00:14:27,050 --> 00:14:29,640 Now, by declaring this here, 175 00:14:29,640 --> 00:14:33,530 we are also saying we can now tie in 176 00:14:33,530 --> 00:14:40,210 these three properties to the three form elements in my template. 177 00:14:40,210 --> 00:14:43,920 So, that's what we have ended up achieving here. 178 00:14:43,920 --> 00:14:46,440 For the constructor, let 179 00:14:46,440 --> 00:14:55,640 me inject the dialogue ref here, 180 00:14:55,880 --> 00:15:05,410 mat-dialogue ref, and this mat dialogue ref will take the corresponding component. 181 00:15:05,410 --> 00:15:08,755 So, this is a reference to this login component here. 182 00:15:08,755 --> 00:15:11,990 So, that tells us when this- when this is submitted, 183 00:15:11,990 --> 00:15:14,060 how to handle this. 184 00:15:14,060 --> 00:15:21,985 So, in here, let me add in an on submit function here, 185 00:15:21,985 --> 00:15:24,155 and inside the on submit function, 186 00:15:24,155 --> 00:15:27,935 I'm going to simply login, 187 00:15:27,935 --> 00:15:32,145 log the corresponding users information, 188 00:15:32,145 --> 00:15:35,690 so then the user clicks on the login form, 189 00:15:35,690 --> 00:15:39,430 the login form and submits the login form. 190 00:15:39,430 --> 00:15:44,585 I'm just going to log the user's information to the console at the moment. 191 00:15:44,585 --> 00:15:49,150 Later on, we will design in the server-side course. 192 00:15:49,150 --> 00:15:52,310 We will handle the actual login process when 193 00:15:52,310 --> 00:15:57,280 our server is ready and is able to handle the login of the user. 194 00:15:57,280 --> 00:16:03,710 So, after this, we'll say this dialogue ref close. 195 00:16:03,710 --> 00:16:06,255 Now, why do we include this here? 196 00:16:06,255 --> 00:16:08,105 So, when the form is submitted, 197 00:16:08,105 --> 00:16:13,960 we also want to dismiss the component there, 198 00:16:13,960 --> 00:16:15,190 the dialogue component there. 199 00:16:15,190 --> 00:16:16,800 So, by calling this, 200 00:16:16,800 --> 00:16:19,120 this dialogue ref close, 201 00:16:19,120 --> 00:16:23,620 we are asking the dialogue component to be closed here. 202 00:16:23,620 --> 00:16:29,650 So, that's the reason why I get a reference to the login component here, 203 00:16:29,650 --> 00:16:33,655 which is acting as my dialogue component here. 204 00:16:33,655 --> 00:16:37,445 So, we will be able to close the dialog component by doing this. 205 00:16:37,445 --> 00:16:39,350 So, once the user submits the form, 206 00:16:39,350 --> 00:16:41,440 you will log the user information, 207 00:16:41,440 --> 00:16:46,415 and then close the dialog box. That's it. 208 00:16:46,415 --> 00:16:51,640 Let's save the changes and then go and take a look at the updated application. 209 00:16:51,640 --> 00:16:54,590 Go into our application in the browser, 210 00:16:54,590 --> 00:17:02,900 let me open the JavaScript Console so that you can see the information being logged in. 211 00:17:02,900 --> 00:17:09,890 Let me open the login dialog here with the form already in place, 212 00:17:09,890 --> 00:17:12,425 the username and password already in place. 213 00:17:12,425 --> 00:17:15,820 So, let me type in a user's name. 214 00:17:15,820 --> 00:17:19,165 I'm being narcissistic here. 215 00:17:19,165 --> 00:17:22,710 So, I'm typing in the username and password here. 216 00:17:22,710 --> 00:17:26,495 Now, notice that as I type in the information here, 217 00:17:26,495 --> 00:17:33,570 since I am showing the value of the user JavaScript object here, 218 00:17:33,570 --> 00:17:42,775 any changes that I make is immediately being reflected to the screen here. 219 00:17:42,775 --> 00:17:50,110 Also the remember checkbox being ticked on and off here. 220 00:17:50,110 --> 00:17:53,360 Then when I submit the form here, 221 00:17:53,360 --> 00:17:56,040 you can see that in the console, 222 00:17:56,040 --> 00:17:59,350 the user's information is logged to the console, 223 00:17:59,350 --> 00:18:00,595 the username, the password, 224 00:18:00,595 --> 00:18:03,440 and the remember value is locked to the console. 225 00:18:03,440 --> 00:18:06,170 So, you can now see that my login form, 226 00:18:06,170 --> 00:18:09,275 the template driven form is working correctly. 227 00:18:09,275 --> 00:18:12,305 With this, we complete this exercise, 228 00:18:12,305 --> 00:18:18,965 where we have seen how we can design a template driven form in our Angular application. 229 00:18:18,965 --> 00:18:22,870 This is a good time for you to do a Git Commit with the message, 230 00:18:22,870 --> 00:18:26,000 Template Driven Forms Part 1.