1 00:00:00,180 --> 00:00:04,140 In this lecture, we are going to carry a couple of forum controls. 2 00:00:04,410 --> 00:00:08,039 It's going to be a similar process to creating form groups. 3 00:00:08,310 --> 00:00:13,980 We can add a directive to our elements to help angular identify the controls in our form. 4 00:00:14,340 --> 00:00:20,280 In the resource section of this lecture, I provide a link to a directive called Kng Model. 5 00:00:22,160 --> 00:00:28,400 Let's read the description together, creates a forum control instance from a domain model and binds 6 00:00:28,400 --> 00:00:30,380 it to a form control element. 7 00:00:30,920 --> 00:00:37,010 This directive will help us with creating a form control in our template before we start using this 8 00:00:37,010 --> 00:00:37,670 directive. 9 00:00:37,850 --> 00:00:39,710 We should verify two things. 10 00:00:40,010 --> 00:00:42,860 First, we should verify its availability. 11 00:00:43,160 --> 00:00:47,600 If we scroll down, we will come across a section called exported from. 12 00:00:48,080 --> 00:00:51,350 This directive gets exported from the Foreman's module. 13 00:00:51,590 --> 00:00:53,630 We have already imported this module. 14 00:00:53,870 --> 00:00:56,450 We can start using this directive right away. 15 00:00:57,170 --> 00:00:59,990 Secondly, we should verify these selector. 16 00:01:00,350 --> 00:01:03,530 The next section will give us a list of selectors. 17 00:01:03,920 --> 00:01:10,940 This directive can be added to any element that doesn't have the form control or form control name directives. 18 00:01:11,270 --> 00:01:11,750 Great. 19 00:01:12,140 --> 00:01:17,240 Unlike reactive forms, we don't have to do much to start using template forms. 20 00:01:17,510 --> 00:01:20,600 We don't need to create instances in our class. 21 00:01:21,050 --> 00:01:26,270 This is because template forms are configured in templates and set of component class files. 22 00:01:26,870 --> 00:01:28,880 Let's begin using this directive. 23 00:01:29,150 --> 00:01:31,430 Open the log in template file. 24 00:01:33,980 --> 00:01:36,530 We will start with the input for the email. 25 00:01:36,860 --> 00:01:40,730 It's the first input in the form on the input element. 26 00:01:40,880 --> 00:01:43,250 We are going to add the name attribute. 27 00:01:45,920 --> 00:01:51,110 Before adding the new model directive, we must assign a name to our input. 28 00:01:51,560 --> 00:01:54,500 The name is used as the ID for the control. 29 00:01:54,860 --> 00:01:57,590 It helps angular identify the control. 30 00:01:57,860 --> 00:02:01,730 We can assign an ID to the control with the name attributes. 31 00:02:02,000 --> 00:02:04,760 We will set the name attribute to email. 32 00:02:07,110 --> 00:02:10,500 Next, let's add the new model directive. 33 00:02:12,890 --> 00:02:15,620 Just like that, we've created a forum control. 34 00:02:15,890 --> 00:02:22,130 We don't need to dive into our class to create a forum control with the Forms module, angular will 35 00:02:22,130 --> 00:02:26,180 automate this process as long as we're using the correct selectors. 36 00:02:26,510 --> 00:02:28,670 There's one final step we need to take. 37 00:02:28,970 --> 00:02:31,340 We need to add two way data binding. 38 00:02:33,810 --> 00:02:40,260 Two way binding is a feature for being able to listen to events and update values simultaneously. 39 00:02:40,560 --> 00:02:47,190 We can skip the logic ourselves two way data binding as a convenient feature for updating values from 40 00:02:47,190 --> 00:02:47,850 an input. 41 00:02:48,180 --> 00:02:51,250 The syntax for a two way binding will look familiar. 42 00:02:51,270 --> 00:02:52,650 Once we dive into it. 43 00:02:55,260 --> 00:02:57,630 Two way binding syntax is optional. 44 00:02:57,840 --> 00:03:04,600 It's already possible to listen to events on an element and update its value below the input element. 45 00:03:04,620 --> 00:03:07,020 We will create another input element. 46 00:03:09,690 --> 00:03:14,910 On this element, we will bind the value property and listen for the change event. 47 00:03:19,630 --> 00:03:23,080 We can handle inputs with property and event findings. 48 00:03:23,380 --> 00:03:25,900 This syntax is always available to us. 49 00:03:26,170 --> 00:03:28,090 However, it is a lot to write. 50 00:03:28,480 --> 00:03:33,790 Angular provides a shorthand way of accomplishing the same thing with two way binding. 51 00:03:34,120 --> 00:03:40,270 Essentially, it combines the two syntax is together on the Energy Model Directive. 52 00:03:40,390 --> 00:03:44,320 We will add property binding and event binding to the directive. 53 00:03:46,960 --> 00:03:50,500 The new Model Directive can perform two tasks. 54 00:03:50,770 --> 00:03:55,000 It can set the value attribute for an element with property binding. 55 00:03:55,330 --> 00:04:00,430 At the same time, it'll limit any event whenever the value changes in the document. 56 00:04:00,760 --> 00:04:02,890 So this is the same as this. 57 00:04:05,520 --> 00:04:12,330 The new Model Directive is a convenient feature for updating an input and listening for changes using 58 00:04:12,330 --> 00:04:13,810 two way data binding. 59 00:04:13,830 --> 00:04:19,560 We can easily update the properties in our classes without writing most of the logic ourselves. 60 00:04:19,920 --> 00:04:23,430 Let's bind this directive to a property called credentials. 61 00:04:23,760 --> 00:04:24,390 Email. 62 00:04:26,930 --> 00:04:29,390 This property doesn't exist in our class. 63 00:04:29,570 --> 00:04:30,680 We should define it. 64 00:04:30,950 --> 00:04:33,500 Open the log in component class file. 65 00:04:35,980 --> 00:04:42,700 The final property called credentials, it'll be an object with two properties called email and password. 66 00:04:43,060 --> 00:04:45,190 They'll both be set to empty strings. 67 00:04:47,670 --> 00:04:49,830 We're storing the fields in an object. 68 00:04:49,980 --> 00:04:55,920 We don't have to, but I recommend organizing your data in an object for organization reasons. 69 00:04:56,190 --> 00:04:58,320 Let's try testing out our form. 70 00:05:00,940 --> 00:05:07,450 In the browser or able to change the email in the form, let's send random values to both fields. 71 00:05:10,030 --> 00:05:16,450 We can use the developer tools to help us verify the values are being updated in the object, search 72 00:05:16,450 --> 00:05:17,920 for the logging component. 73 00:05:20,410 --> 00:05:27,370 On this component, the credentials object is updated in real time, thanks to the new Model Directive. 74 00:05:27,400 --> 00:05:30,640 We have a copy of our data in the components class. 75 00:05:31,060 --> 00:05:34,600 It's not the only location where the controls values are stored. 76 00:05:34,900 --> 00:05:39,040 The form group has a copy to nested inside. 77 00:05:39,040 --> 00:05:41,740 The log in component is the form element. 78 00:05:41,950 --> 00:05:44,590 We looked at this element in the last lecture. 79 00:05:44,920 --> 00:05:48,640 It holds the form group instance under a form group. 80 00:05:48,820 --> 00:05:52,540 Angular has added the controls inside the form to this group. 81 00:05:52,930 --> 00:05:59,340 If we look under the list of properties, we can find our controls under the form controls property. 82 00:06:01,940 --> 00:06:05,630 Angular is smart enough to register a control under this group. 83 00:06:05,960 --> 00:06:12,470 It's able to make the connection for us as long as we're using the new Model Directive inside the form 84 00:06:12,470 --> 00:06:13,040 element. 85 00:06:13,190 --> 00:06:14,540 We should be good to go. 86 00:06:14,900 --> 00:06:20,990 If the input element were outside of the form, Angular would not register the control with a group. 87 00:06:21,140 --> 00:06:27,830 It's important to remember that with a few directives, we've created a form group and form control. 88 00:06:28,100 --> 00:06:32,330 As you can see, template forms are way easier than reactive forms. 89 00:06:32,600 --> 00:06:37,580 In the next lecture, we're going to continue exploring template driven forms.