1 00:00:00,180 --> 00:00:05,480 In this lecture, we will learn how to access the groups and controls created by Angular. 2 00:00:05,860 --> 00:00:12,090 We've talked about how Templar forms are not that different from reactive forms under the hood, template 3 00:00:12,090 --> 00:00:14,670 forms use form groups and controls. 4 00:00:14,970 --> 00:00:18,870 It might seem mysterious because we haven't imported those classes. 5 00:00:19,440 --> 00:00:23,820 Angular can create these objects by searching for directives in our template. 6 00:00:24,210 --> 00:00:26,940 The form element is treated as a directive. 7 00:00:27,270 --> 00:00:29,550 A form group is bound to this element. 8 00:00:29,880 --> 00:00:34,650 The same goes for the Energy Model Directive, but with a form control object. 9 00:00:35,010 --> 00:00:40,680 This is the power of template forms rather than configuring B form from the component class. 10 00:00:40,890 --> 00:00:43,350 We can configure the form through the template. 11 00:00:43,950 --> 00:00:49,740 One of the main challenges for working with template forms is accessing properties from the group and 12 00:00:49,740 --> 00:00:50,520 controls. 13 00:00:50,850 --> 00:00:53,760 At the moment, we don't know if the form is valid. 14 00:00:54,120 --> 00:00:56,700 This information will be crucial for validation. 15 00:00:57,090 --> 00:01:01,980 One method of accessing the properties in the group is by using template variables. 16 00:01:02,430 --> 00:01:05,850 Templates can create variables which might seem strange. 17 00:01:06,090 --> 00:01:11,430 However, angular makes it possible to define variables from within our template file. 18 00:01:11,800 --> 00:01:12,930 Let's give it a try. 19 00:01:13,200 --> 00:01:15,330 Open the log in template file. 20 00:01:17,960 --> 00:01:21,380 On the form element, we will add a hash character. 21 00:01:23,960 --> 00:01:29,930 The harsh character allows us to declare a variable in the template after typing this character. 22 00:01:30,110 --> 00:01:32,510 We need to provide a name for our variable. 23 00:01:32,750 --> 00:01:35,210 We will set the name to log in form. 24 00:01:37,840 --> 00:01:43,660 We don't need to provide a value for this variable angular will assign the element to the variable. 25 00:01:44,050 --> 00:01:48,850 As a result, we can access the form elements properties in our template. 26 00:01:49,210 --> 00:01:52,180 There are some limitations to template variables. 27 00:01:52,510 --> 00:01:55,360 Firstly, there are only accessible in the template. 28 00:01:55,660 --> 00:02:00,670 We can't use them in our components, nor can we use them in other components. 29 00:02:01,180 --> 00:02:04,970 Let's try using this variable below the form element. 30 00:02:04,990 --> 00:02:08,440 We will create a pair of div tags with an expression. 31 00:02:11,080 --> 00:02:17,290 Inside this expression, we will output the auto complete property on the log form objects. 32 00:02:19,780 --> 00:02:23,890 We can reference our variable through its name after the hash character. 33 00:02:24,220 --> 00:02:26,770 We can treat it like a property in our class. 34 00:02:27,100 --> 00:02:32,230 The property we're accessing is a native property that can be found on form elements. 35 00:02:32,590 --> 00:02:36,220 It's not specific to angular, it's defined by the browser. 36 00:02:36,580 --> 00:02:40,450 This property will tell us if autocomplete is enabled for the form. 37 00:02:40,780 --> 00:02:43,450 Let's refresh the form to view the output. 38 00:02:46,060 --> 00:02:51,730 Below the form, we can view the value of the auto complete property auto complete has turned on. 39 00:02:51,970 --> 00:02:54,400 That's great, but we don't need this information. 40 00:02:54,880 --> 00:03:00,910 We're trying to get information about the group or control for validation if we want that information. 41 00:03:01,030 --> 00:03:04,240 We'll need to modify our variable before we do. 42 00:03:04,300 --> 00:03:09,280 Let's check out the form element in the log in component with the developer tools. 43 00:03:11,870 --> 00:03:17,600 Next to the name of the element is a list of classes and directives attached to the form element. 44 00:03:17,930 --> 00:03:22,100 They are highlighted in yellow orange text by clicking on this element. 45 00:03:22,520 --> 00:03:25,370 We can view the properties related to this element. 46 00:03:25,670 --> 00:03:28,610 The list of properties is separated by their class. 47 00:03:29,120 --> 00:03:34,970 As you can see, the Engine Control Status Group Class has its own set of properties. 48 00:03:35,300 --> 00:03:38,570 They're separate from the Nji Form Directive properties. 49 00:03:38,930 --> 00:03:41,600 The Energy Form Directive is what we care about. 50 00:03:41,930 --> 00:03:45,350 It stores the properties related to the group and controls. 51 00:03:45,680 --> 00:03:50,060 We need to tell Angular to give us access to this DirecTV's properties. 52 00:03:50,330 --> 00:03:51,590 It's effortless to do. 53 00:03:51,800 --> 00:03:55,490 Go back to the editor back on the form element. 54 00:03:55,700 --> 00:03:58,070 We are going to update the template variable. 55 00:03:58,430 --> 00:04:02,180 We will assign the variable to a value called N.G. form. 56 00:04:04,610 --> 00:04:11,030 By default, if we don't assign a value to a template variable, angular will assume the value should 57 00:04:11,030 --> 00:04:11,930 be the element. 58 00:04:12,230 --> 00:04:18,140 However, if we want to access a class or directive, we can explicitly set the variable. 59 00:04:18,470 --> 00:04:24,710 In this example, we're telling Angular to set the template variable to the Nji Form Directive. 60 00:04:25,220 --> 00:04:31,250 We can verify this assignment by hovering our mouse over the log in form variable in the expression. 61 00:04:31,880 --> 00:04:34,670 The type of our variable is energy form. 62 00:04:35,000 --> 00:04:38,690 I'm going to quickly remove the assignment from the template variable. 63 00:04:41,150 --> 00:04:48,410 This time, if we hover our mouse over the log and form variable, the type is set to HTML form element. 64 00:04:50,930 --> 00:04:55,490 If I can do the changes, you will get an air under the auto complete property. 65 00:04:55,910 --> 00:05:01,850 Our editor will tell us the auto complete property does not exist on the energy form object, which 66 00:05:01,850 --> 00:05:02,630 makes sense. 67 00:05:02,960 --> 00:05:05,510 We're not dealing with the form element anymore. 68 00:05:05,840 --> 00:05:08,630 Instead, we have access to the form group. 69 00:05:08,990 --> 00:05:11,600 Let's access a property called valid. 70 00:05:14,160 --> 00:05:16,500 Next, let's refresh the page. 71 00:05:18,950 --> 00:05:21,170 Under the forum, we will see true. 72 00:05:21,470 --> 00:05:23,540 We haven't added validations yet. 73 00:05:23,900 --> 00:05:31,070 So the form should be completely valid by using template variables we can access and elements properties. 74 00:05:31,400 --> 00:05:38,540 If we need access to the directives or classes attached to an element, we can do so by explicitly stating 75 00:05:38,540 --> 00:05:45,590 so in the next set of lectures, we all start using our template variables to help us with validation.