Form and Input State

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