We have just learnt about Angular support for forms, and in particular, the template-driven form. In this exercise, we will create a template-driven form and then include that into our login component dialogue that we created in the previous exercise. In this lecture the template-driven form that we create, enables the user to type in their username and password into the login form, and then submit this information to our application. Now, how this information is processed by the server side, that is left to a later course. But for the moment, we have a way of capturing the username and password submitted by the user through the login template-driven form, which we will design in this exercise. Proceeding with the exercise, the first step to be able to leverage the use of template-driven forms is to go to app module.ts file and then import a few supporting modules for our application. So, the first thing that I'm going to import is the MatFormFieldModule from Angular material form field. So, this enables us to group together a bunch of items into a form field there. Then, we'll also import the MatInputModule. The input module supports the input component which is a stylized Angular Material component that supports the input form field from HTML forms here. Then, also, let me import a MatCheckbox, the corresponding module from Angular Material checkbox. So, these three support three form elements that we're going to use when we create our application. The form field module enables us to group together a bunch of form elements there. The input module enables us to create an input field in there. The checkbox module, as you would expect, enables us to create a checkbox. In addition, I also need to import the FormsModule from Angular forms. The FormsModule is the one that supports forms in Angular. This is the one that supports template-driven forms. So, now that we have imported these, obviously, the next step is to go into the NgModule decorator and then pull these into place here. So, we'll go in here and then input the FormsModule. Let me input the FormFieldModule, the InputModule, the CheckboxModule in here. Then, now my app module is ready to support the use of template-driven forms in our application. Now that we have completed this, let's go to the login component. Much of our work is in the login component. Let me first design the form. So, going into the login component template file, let me add in the template for our form to create the form here. So, at the top, I will create a p which will display the information that I typed into the form. In the code, we will have a JavaScript variable called user, which will be tied in to the fields in this form. Now, when we create that, then will become more clear. Now, here, by including this, what I am enabling is to show the changes. As we type in information into the form, the corresponding changes that happen in the code to reflect the form state can be shown right there. Now, in addition, now I'm going to create the form here. So, we'll go in and then add the form element here. To this form element, I'm going to apply the novalidate attribute here because we want the form validation to be taken care of by Angular and not by the standard HTML form validation that browser support. So, we're going to shift that responsibility into our Angular application itself. So, that's why I specify the novalidate attribute for my phone. So, that creates my form here. Inside here, I'm going to use the mat-dialog-content. Now, the mat-dialog-content, as you would expect, is an area which contains the content of the dialog itself. So, that's why we put that mat-dialog-content in here. Then, in here, I'm going to create my form here. So, I put a p there. Inside that p, I will use a mat-form-field here. So, the mat-form-field enables me to group together a set of form-related elements that I use together. So, in here, I will put in the input here. So, the input form field from HTML file forms. Then, to this, I will apply the matInput attribute which will enable us to apply the material design styling for this input. Then, we will give a placeholder for this as username, and as you would expect, and the type will be text type here. Let me add in the ngModel. So, a template-driven form is supported through the ngModel attribute here. So, with the ngModel. So, you can see the banana inbox way of declaring this. Then, we'll say user.username. So, this user is going to be a JavaScript object in my TypeScript file, which will contain a username property there, which will track the value that you input into this input field in my form there. So, that's why we are tying this input field information into this JavaScript object. So, this is the two-way data binding that we are doing between the form element and the corresponding JavaScript code. Then, we'll give this a name as username here. So, that is my first form fields that I've added in here. Now, similarly, I will add in the second form field for the password. So, for that, let me just copy this and then paste it down here. So, the second field would be Input, matInput, placeholder is password, and then the type is password. So, the password input element from HTML5 form support. The ngModel itself will be tied into user password and the name would be password. So, you see that the user JavaScript object now contains two properties, username and password, which will track the user's credentials here. So, these two form fields inside this p here, and then also we will add in one more called as mat-checkbox. You saw that we had included the checkbox module earlier. So, we're going to add in this. Now, this checkbox which when ticked will inform my Angular application that the username and password should be saved in the application. So, let me tie this in with the NG model to a corresponding property called remember in the user object. So, this will be, this property will be either true or false depending on whether the checkbox is ticked or unticked. So, that's the way we track. So, we are doing the two-way data binding between this checkbox and this property called remember of the user JavaScript object in my code there. Then the name would be remember, and then we'll give this a label as remember me. So, when the user checks this, then the user's information will be remembered in here. So, that's the mat-checkbox that we have added. So, we have three fields here, the username, the password, and then a checkbox here in my form here. So, this is a mat-dialogue content here. Now, in addition to the mat-dialogue content, I can also add mat-dialogue actions here. Now, the dialog actions can contain the buttons that correspond to this dialog. So, this is what will act as the action buttons in the dialogue, and also since they are enclosed inside the form, these buttons will also act as form submission buttons for me. So, in here, let me do a span class flex spacer, and then let me add in a button, mat-button, and then this button, I will also turn that into a mat-dialog close button. So, this would be a cancel button that I will include in my form here, then this is clicked the dialogue will be dismissed, and essentially which means that you're not submitting the form there. So, that also acts as the cancel button for the form, and then also dismissing the dialogue at the same time. So, by using this attribute to this button, we are declaring this as the button that dismisses the fault, the same way that we have this button in the toolbar. So, the mat-dialog close there. Then other button that we will have is for submit so that this button type would be the submit button inside a form there. So, when this is clicked, that triggers the form submission for this form here, and then let me add in a class to this, we will say background primary, and text floral. These classes I have already added into my styles.ACSS file there. So, text floral white, and this button would be labeled as the login button there. So, this would be a blue colored button that will be shown in the screen there. So, with this, my form structure is created in the template there. Now, the next step is to go into the code and then handle the form submission itself. So, now going to login component.ts file, we need to handle the form submission here. Now, the first step that I'm going to do is when this login component is created, we will create a user object here with the properties username, which would be an empty string to begin with, password which will also be an empty string to begin with, and then remember which is false. Now, by declaring this here, we are also saying we can now tie in these three properties to the three form elements in my template. So, that's what we have ended up achieving here. For the constructor, let me inject the dialogue ref here, mat-dialogue ref, and this mat dialogue ref will take the corresponding component. So, this is a reference to this login component here. So, that tells us when this- when this is submitted, how to handle this. So, in here, let me add in an on submit function here, and inside the on submit function, I'm going to simply login, log the corresponding users information, so then the user clicks on the login form, the login form and submits the login form. I'm just going to log the user's information to the console at the moment. Later on, we will design in the server-side course. We will handle the actual login process when our server is ready and is able to handle the login of the user. So, after this, we'll say this dialogue ref close. Now, why do we include this here? So, when the form is submitted, we also want to dismiss the component there, the dialogue component there. So, by calling this, this dialogue ref close, we are asking the dialogue component to be closed here. So, that's the reason why I get a reference to the login component here, which is acting as my dialogue component here. So, we will be able to close the dialog component by doing this. So, once the user submits the form, you will log the user information, and then close the dialog box. That's it. Let's save the changes and then go and take a look at the updated application. Go into our application in the browser, let me open the JavaScript Console so that you can see the information being logged in. Let me open the login dialog here with the form already in place, the username and password already in place. So, let me type in a user's name. I'm being narcissistic here. So, I'm typing in the username and password here. Now, notice that as I type in the information here, since I am showing the value of the user JavaScript object here, any changes that I make is immediately being reflected to the screen here. Also the remember checkbox being ticked on and off here. Then when I submit the form here, you can see that in the console, the user's information is logged to the console, the username, the password, and the remember value is locked to the console. So, you can now see that my login form, the template driven form is working correctly. With this, we complete this exercise, where we have seen how we can design a template driven form in our Angular application. This is a good time for you to do a Git Commit with the message, Template Driven Forms Part 1.
