Now that our form has some validation rules applied we can check the state of those inputs. In this video we'll look at different aspects of our form's state. We'll learn about dirty checking and how to tell if the user has touched the form.
Right now our form is validated by using the browser's 0:00 built in form validation methods. 0:03 In order to apply custom validation messages we'll need to disable the form's 0:05 validation and handle the validation ourselves when the form is submitted. 0:10 Let's go ahead and open up the entry-comment-form.component.html. 0:16 Let's add the now Validate attribute to the form element. 0:21 By adding the no validate attribute we're letting the browser know 0:28 that we'll be taking care of the validating of the form and 0:32 to suppress any validation messages when the form is submitted, now. 0:35 When we submit a form without any values in the name or comment, 0:41 we'll see the same empty rows being added to the comment list above. 0:45 To prevent these empty rows from being added, and invalid data being 0:53 sent to the backend server, We'll need to check the form state when it's submitted. 0:56 Open up the EntryCommentFormComponent.ts file. 1:01 In the submit method, we'll check if our form is valid. 1:05 If it's not valid, we won't allow the function to execute. 1:10 We'll add a simple check at the top of the un submit method body. 1:19 Let's see if that prevented the form from being submitted and 1:27 empty rows being added to the list of comments. 1:30 Okay, it looks good. 1:33 That solves a part of the problem. 1:34 Now, we need validation messages added to the form when the form is invalid. 1:36 The quickest way to add validation messages to our form 1:41 is by hard curtaining the messages in the template. 1:44 Let's open up the entry comment form component.html. 1:46 Beneath the name input add a <div> and 1:53 give it the classes alert and 1:59 alert danger, </div> 2:04 The alert and the alert danger classes aren't specific to angular. 2:15 These are only for styling the div if it's visible to the user. 2:20 Before we write our custom messages, we need to create a local variable on 2:24 the input element so that we can check the state as the user makes changes. 2:28 This local variable can be used anywhere in the view. 2:37 On the name input field, we'll add a local variable NameField 2:40 and assign ngModel to the variable. 2:46 With that, we can create our custom validation messages. 2:54 Inside the alert div, we'll add another div to indicate the field is required. 2:58 To show this field only when the field is left blank, we can bind the hidden 3:12 attribute of the div with the expression that evaluates to a truth value. 3:17 In our case, we'll check if the field has the required error. 3:22 Because we created the local variable name field, 3:36 we now have to access to the errors on the field. 3:40 We put the square brackets around the hidden attribute which means that this 3:44 will toggle the attribute on when the expression evaluates to true. 3:49 Save the file and take a look in the browser. 3:57 Okay, so a validation message shows up even though we haven't touched the form 4:02 and if we look at the browsers console, we can see an error has occurred. 4:08 When we added the hidden attribute on the div 4:14 we were preventing angular from evaluating the code. 4:16 And since our forms hasn't been touched we haven't triggered angular form validate's 4:20 yet, which means the arrays property is null, 4:25 resulting in the exception in the code. 4:29 To avoid this exception we need to completely hide 4:32 the validation messages from the form, until we're ready for them to be shown. 4:36 We can use the ngIf directive, which will add or 4:41 remove elements from the document, based on some condition. 4:45 In our case, we'll be setting an expression that retains true only 4:48 if the form is dirty, or has been touched, and the field has errors. 4:54 Let's at the ngIf directive like this. 4:59 In the ngIf expression, we'll add nameField.dirty. 5:03 Or nameField.touched. 5:12 And 5:22 nameField.errors. 5:23 Dirty, meaning if the name filed has changed. 5:32 Touched, if it's been touched by user. 5:36 And, if there's an errors. 5:39 Back in the browser, I'll submit the form without touching any of the fields. 5:43 The form doesn't get submitted but 5:47 our required validation method isn't available. 5:49 Let's see if I click in the Name field, but don't type anything, 5:52 ahen click on Submit. 5:56 When I clicked in the name field and 5:59 then focus left, I was clicking the submit button. 6:01 The state of the input changed from untouched to touched. 6:05 We can watch this happen in the browser. 6:09 Let's refresh the page. 6:11 And inspect the name label. 6:15 I don't want to accidentally trigger the touched event on the name field. 6:20 Once I find the field in div tools, I can watch the classes of the element change. 6:25 Right now, the field has the class of ng-untouched. 6:31 If I put my mouse in the field, nothing changes. 6:38 As soon as I click on the Submit button, I can see that 6:42 ngunsearched is removed and is immediately replaced with ngtouched. 6:47 Since I've submitted the form, 6:54 I also want to check the validations on this message if the form was submitted. 6:56 Inside of our expression, let's add another all case and 7:02 set it to comment form.submitted Now 7:09 whenever the forum is submitted we can 7:14 trigger our validation messages. 7:19 Let's go ahead and add our messages in. 7:24 Let's create a message for our minimum length. 7:37 Name must be a minimum 7:44 of three characters, Long. 7:50 On the text area let's use the same error messages as the name field above but 8:14 use the comment field local variable. 8:20 And let's change all references to name to comment. 8:39 We should also add the local variable to the comment text area. 8:49 Cool. 9:05 Now when we submit the form we can see why the form didn't fully process. 9:13 This is great. 9:18 We've got basic form validation happening. 9:19 Good job. 9:22 In the next video we'll look at styling the inputs based on their current state. 9:23 See you there. 9:28
You need to sign up for Treehouse in order to download course files.Sign up