1 00:00:00,150 --> 00:00:06,330 In this lecture, we are going to finish the blog informed by validating the password field, validating 2 00:00:06,330 --> 00:00:10,380 the password will not be much different than validating the email field. 3 00:00:10,680 --> 00:00:14,370 I think this would be a great opportunity for a coding exercise. 4 00:00:14,700 --> 00:00:21,510 Try invalidating the password field on your own, create a control and validators and render an error 5 00:00:21,510 --> 00:00:22,110 message. 6 00:00:22,350 --> 00:00:24,410 Pause the video and good luck. 7 00:00:26,070 --> 00:00:26,910 Welcome back. 8 00:00:27,120 --> 00:00:30,580 If you were able to validate the password field, that's great. 9 00:00:30,870 --> 00:00:32,729 If not, that's fine as well. 10 00:00:32,910 --> 00:00:35,110 We will walk through the process together. 11 00:00:35,460 --> 00:00:38,760 We will be working inside the login template file. 12 00:00:41,490 --> 00:00:47,700 The password field can be found under a comment that says password, the first step for validating a 13 00:00:47,700 --> 00:00:50,790 field is to create a form control form. 14 00:00:50,790 --> 00:00:56,010 Controls can be created by adding the new model directive to the input element. 15 00:00:58,640 --> 00:01:04,940 Next, we need to set the ID for the control IDs can be added through the name attribute. 16 00:01:05,269 --> 00:01:07,820 The name of the field will be called password. 17 00:01:10,470 --> 00:01:15,210 After setting the ID, we should start adding validators to the form control. 18 00:01:15,570 --> 00:01:18,030 We aren't going to go heavy on the rules. 19 00:01:18,270 --> 00:01:21,900 We should keep it simple by adding the required attributes. 20 00:01:24,570 --> 00:01:29,240 The rules for the input have been added, if you would like to add more rules. 21 00:01:29,310 --> 00:01:30,570 That's perfectly fine. 22 00:01:30,900 --> 00:01:34,110 The current set of rules will work for our scenario. 23 00:01:34,410 --> 00:01:36,780 We should start rendering an error message. 24 00:01:37,050 --> 00:01:41,670 The current status of our inputs is not available outside the form control. 25 00:01:42,030 --> 00:01:49,260 We can extract this information by adding a template variable on the input element at a template variable 26 00:01:49,260 --> 00:01:50,400 called password. 27 00:01:53,040 --> 00:01:56,760 Angular will return the element the variable is applied to. 28 00:01:57,090 --> 00:01:58,890 That's not what we're looking for. 29 00:01:59,130 --> 00:02:01,470 We need the form control object. 30 00:02:01,740 --> 00:02:06,920 We can grab the control by setting the variable to the Energy Model Directive. 31 00:02:09,580 --> 00:02:14,920 The new Model Directive is responsible for creating the form control object. 32 00:02:15,430 --> 00:02:21,760 We will be able to access these status properties through this template variable below the input. 33 00:02:21,850 --> 00:02:25,420 We will render the error message to save some time. 34 00:02:25,540 --> 00:02:29,530 We will make a copy of the error message from the previous input. 35 00:02:29,980 --> 00:02:35,320 Copy and paste the paragraph element from the email field to the password field. 36 00:02:38,070 --> 00:02:44,070 The conditions will need to be updated instead of checking the email variable for the status of the 37 00:02:44,070 --> 00:02:44,640 field. 38 00:02:44,820 --> 00:02:49,350 We will replace this variable with the password template variable. 39 00:02:52,050 --> 00:02:58,980 Inside the paragraph element, the message will be updated to the following text password is invalid. 40 00:03:01,690 --> 00:03:02,920 We're almost finished. 41 00:03:03,250 --> 00:03:05,140 There is one last thing we will do. 42 00:03:05,440 --> 00:03:08,230 We should store the password in the class file. 43 00:03:08,530 --> 00:03:12,670 We have an object called credentials for storing the user's information. 44 00:03:13,060 --> 00:03:16,480 We are going to need this information during form submission. 45 00:03:16,840 --> 00:03:23,090 We can add to weigh binding to the model to grab the value on the new model directive. 46 00:03:23,110 --> 00:03:25,090 Let's apply to weigh binding. 47 00:03:25,510 --> 00:03:29,860 The directive will be bound to be credentials dot password property. 48 00:03:32,570 --> 00:03:33,410 We're finished. 49 00:03:33,560 --> 00:03:36,530 Let's test the password field in the browser. 50 00:03:38,950 --> 00:03:43,660 If we type inside the password field and remove the value, the error will appear. 51 00:03:46,210 --> 00:03:49,690 As expected, the validation is working perfectly. 52 00:03:50,020 --> 00:03:52,630 We can type a value to remove the error. 53 00:03:52,990 --> 00:03:56,260 The validation rules we added to the field are simple. 54 00:03:56,620 --> 00:04:03,940 We're asking the user to provide any value log in forms are not as strict as registration forms, either 55 00:04:03,940 --> 00:04:07,270 the user types in the correct information or they don't. 56 00:04:07,600 --> 00:04:13,030 In the next lecture, we will finalize the log in form, which is to handle the form submission.