1 00:00:00,240 --> 00:00:04,920 In this lecture, we were going to add the last piece of the puzzle to our log in form. 2 00:00:05,190 --> 00:00:07,140 We need to handle the forms of mission. 3 00:00:07,440 --> 00:00:10,320 It's not going to be much different than what we did before. 4 00:00:10,620 --> 00:00:14,640 Therefore, I think it would be a great opportunity as an exercise. 5 00:00:15,150 --> 00:00:17,370 There are three steps you will need to take. 6 00:00:17,580 --> 00:00:19,290 First, disable the button. 7 00:00:19,590 --> 00:00:23,310 Users shouldn't be able to submit the form until the form is valid. 8 00:00:23,640 --> 00:00:29,130 Second, and tailwind classes for changing the appearance of the button if it's disabled. 9 00:00:29,520 --> 00:00:32,880 Lastly, listen for the submit event on the form. 10 00:00:33,180 --> 00:00:35,070 Pause the video and good luck. 11 00:00:37,120 --> 00:00:37,930 Welcome back. 12 00:00:38,110 --> 00:00:43,000 If you're able to submit the form, that's great, if not, that's perfectly fine. 13 00:00:43,330 --> 00:00:45,370 Let's go through the solution together. 14 00:00:45,610 --> 00:00:47,650 Open the log in template file. 15 00:00:50,160 --> 00:00:54,100 The first step is to disable the button at the top of the form. 16 00:00:54,120 --> 00:00:57,720 We've added a template variable to the form element. 17 00:00:58,140 --> 00:01:03,630 We will have access to the form group object, which contains the current status of the form. 18 00:01:03,960 --> 00:01:07,790 That's going to help us toggle the button at the very bottom of the form. 19 00:01:07,800 --> 00:01:13,980 We will find the button bind the disabled attribute to the log and form invalid property. 20 00:01:16,520 --> 00:01:19,640 The invalid property will store a Boolean value. 21 00:01:19,880 --> 00:01:26,270 It'll tell us if the form is invalid, if this property is true, the disabled attribute will be added 22 00:01:26,270 --> 00:01:27,020 to the button. 23 00:01:27,380 --> 00:01:32,360 This behavior should stop the user from submitting the form until the form is valid. 24 00:01:32,930 --> 00:01:37,940 Alternatively, you could try checking the valid property if that's what you did. 25 00:01:38,060 --> 00:01:39,290 That's perfectly fine. 26 00:01:39,620 --> 00:01:42,800 I'm choosing an alternative property to spice things up. 27 00:01:43,070 --> 00:01:45,620 There isn't an advantage to either solution. 28 00:01:46,170 --> 00:01:53,210 Next, let's add some classes to the button to help the user understand they can't submit the form tailwind 29 00:01:53,220 --> 00:01:57,050 ships with varying classes for when an element is disabled. 30 00:01:57,350 --> 00:02:03,470 We can add classes if the button is disabled by adding the disabled variant, followed by the name of 31 00:02:03,470 --> 00:02:04,160 the class. 32 00:02:04,550 --> 00:02:12,830 We are going to apply to two classes for when the button is disabled there the Opacity 50 and Biji Indigo 33 00:02:12,830 --> 00:02:14,180 400 classes. 34 00:02:16,730 --> 00:02:19,280 We're setting the opacity to 50 percent. 35 00:02:19,610 --> 00:02:23,720 Changing the background color will prevent the hover effect from being applied. 36 00:02:24,110 --> 00:02:26,120 We can move on to the final step. 37 00:02:26,450 --> 00:02:28,760 We need to listen to the submit event. 38 00:02:29,090 --> 00:02:32,880 Scroll to the top of the form on the form element. 39 00:02:32,930 --> 00:02:37,100 We will add event binding to an event called N.G. Submit. 40 00:02:39,610 --> 00:02:45,820 As a reminder, the Energy Submit Directive will limit the submit event while preventing the default 41 00:02:45,820 --> 00:02:47,980 behavior of refreshing the page. 42 00:02:48,310 --> 00:02:52,180 If this event is emitted, we will run a function called log in. 43 00:02:54,860 --> 00:02:56,690 This function doesn't exist. 44 00:02:56,930 --> 00:03:02,240 Let's define it inside the class file, open the log in component class file. 45 00:03:04,720 --> 00:03:07,180 Next to find the log and function. 46 00:03:09,700 --> 00:03:13,420 Inside this function, we will log the credentials object. 47 00:03:15,880 --> 00:03:22,540 Lauding the credentials, object will allow us to verify the form submission was captured after logging 48 00:03:22,540 --> 00:03:23,360 the object. 49 00:03:23,380 --> 00:03:24,790 Let's test our form. 50 00:03:27,350 --> 00:03:34,460 Initially, the button will be disabled because validation is performed when the page loads, both fields 51 00:03:34,460 --> 00:03:35,420 will be invalid. 52 00:03:35,690 --> 00:03:38,870 Let's try adding valid values to the fields. 53 00:03:41,340 --> 00:03:42,240 Fantastic. 54 00:03:42,390 --> 00:03:43,740 The button is enabled. 55 00:03:43,950 --> 00:03:50,790 If we submit the form, the page shouldn't refresh, the energy submit directive will prevent the default 56 00:03:50,790 --> 00:03:51,450 behavior. 57 00:03:51,810 --> 00:03:54,900 Let's check if the console is logging the form data. 58 00:03:57,410 --> 00:04:01,040 The credentials object stores, the email and password. 59 00:04:01,340 --> 00:04:07,520 We're finished working on the login form, this entire section has been dedicated to template forms. 60 00:04:07,760 --> 00:04:13,820 As you can see, they're much simpler to work with, even though template forms are built on top of 61 00:04:13,820 --> 00:04:14,930 reactive forms. 62 00:04:15,090 --> 00:04:18,709 They're much harder to extend because of the limited exposure. 63 00:04:19,040 --> 00:04:25,040 If you want to create complex forms, it's much better to work directly with reactive forms. 64 00:04:25,430 --> 00:04:32,060 Template forms were introduced to provide a more straightforward API for those who don't need to configure 65 00:04:32,060 --> 00:04:33,050 every detail. 66 00:04:33,620 --> 00:04:37,340 We spent a lot of time working on the UI of our forums. 67 00:04:37,610 --> 00:04:43,040 Next, it's time to move on to submitting the data to a server in the next section. 68 00:04:43,130 --> 00:04:47,120 We will begin discussing how to perform this action in Angular. 69 00:04:47,330 --> 00:04:48,350 I'll see you there.