7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 59 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Adding Form Validation

In this lesson, we'll look at how to leverage simple HTML5 attributes on our form controls to enable basic validation, and you'll see how we can show or hide error styling and error messages when required. You'll also learn how to add or remove validation attributes dynamically, and how to manually trigger validation to handle more complex requirements.

2.5 Adding Form Validation

Hi folks, in this lesson we're going to see how we can add validation to the form. We're going to see how to work with the basic HTML5 validation attributes as well as cover more advanced cases where we need to handle some of the validation ourselves. The first three fields in the form are required. Remember we added asterisk inside super elements. The first thing that we can do is add the required attributes to these first three form-fields in the template. Angular will automatically respect the required attributes and begin managing the form and individual control's validity. Let's go back to the browser now. And let's just open up the elements section in the developer tools. So straight away we can see that the form is marked as invalid, that's because it has required fields which are empty. And if we open up the first field sets, then all of the inputs there will also be marked as ng-invalid. But now if we enter some data into one of these form fields, then we see that the ng-invalid class is removed from the input, and it has ng-valid instead. So let's choose a date of birth, and we've already selected a nationality. So now if we go back up to the form, we can see that the whole form is now marked as being valid also. So now let's add some error messages to the form, but we only want to show these error messages if the field is both invalid and has been touched. So to achieve this, we can first add a template reference variable to each of these inputs. And then let's add some error messages. We can bind the hidden property to a method in the class called touchedAndInvalid. And we'll pass through the input elements using the template reference variable that we added to the inputs. This touchedAndInvalid method doesn't exist yet. So let's add that next. So this method will receive an element, and that will be a generic HTML element, and it will return a Boolean value. So this method will return true if the element passed into the method has both the classes ng-touched and ng-invalid. And let's also add a little bit of styling for this error message. So let's go back to the browser now. And if we touch the first input, but we don't enter any text in there and then tap away from the input, then they see the error styling and the error message. The styling isn't perfect, it will push down the rest of the form elements. This is easy enough to fix, we just need to add a container around each set of label inputs and error message. And we can then position the error message appropriately so that it doesn't affect the rest of the form. For now though I want to focus more on the Angular side of things than the styling side of things. So now let's add error messages for the other inputs. And let's just stop pre-selecting Canadian in the select box. And now let's go back to the browser once again. So now the validation should be being applied to all three of the first elements. So if we focus, but don't fill them out, then we see the error styling and the error messages for all three of the controls. As before, the contact detail section is a slightly special case. Both fields are mandatory, only one of them is really required. Let's just add a single error message for both of these fields. And we need to make sure that it's outside of the containing div for the contact preferences section. And this I'm gonna change the property that's the hidden attribute is bound to. So we're not gonna be binding to a method this time, we're just gonna be binding to a simple property called showContactError. And we want this text to be hidden if showContactError is false. And let's just hope that the message So we can just say that one of the fields needs to be completed. So they showContactError property doesn't exist, we're out there in just a moment. We'll need to mark both fields as valid as soon as one of them have being completed. And we can use the existing contact field change handler to do that. But first, we need to add a template reference variable to the whole form. So we've added a template reference variable called f. But this time we've given it the special value ngform. We'll see why this necessary in just a moment. Now we just need to update the contactFieldChanged handlers, which are the blur handlers down here on the Contact Details inputs. And let's just pass through this form. So now let's go back to the class file and make some changes there. First of all, we need to import a couple more things from Angular. And now we can add the showContactError property. This will be a Boolean property, there's another getter that we can add to make our lives easier. This one's called bothEmpty, and it will return a Boolean, and that Boolean will be true if both fields are empty. Now we need to update the contactFieldChanged method to accept the form objects that is now being passed in. So we're specifying that this is of the type form group, which is an object that Angular uses to represent a form or a section of a form. This is why we added the NG form directive previously when we have passed a template reference variable to a method such as in the touched and invalid method that we added earlier. >> The type of object passed in would be a regular HTML element. This time, we want to access Angular's own internal representation of the form. That's where we specify that the form is of a formGroup type, instead. So inside this method, then, after the existing logic, let's first set some constants. This is just to make accessing these properties easier, so the form objects will contain a property called controls, and that will contain references to each of the controls in the form which are named. And those named properties matched the name attribute for inputs or other form controls in the form. So first of all then, if either of these fields have been completed, we want to clear any validators that might have been applied and reset the validity of these fields. The emailControl and telControl variables will be special Angular form control objects. And have methods that we can use to interact with them, such as those used here, clear validators and update value and validity. There are also many more that we can make use of. Let's also make sure that the error message is hidden in this case. The other case that we're interested in at this point, is whether both fields are empty, and also, both fields have been touched. So because the emailControl and telControl objects are both phone control objects, we can check the class list to see if they've been touched. Instead they will both have a touch property which Angular will manage for us and update after any of the fields have been focused. So in this case, we want to add the required validator to both of these controls programmatically. And again, update their value and validity. And in this case, we do want to show the error message. So now let's get back to the browser. And if we focus the email field, but then blur it again, then nothing happens. But if we now focus the telephone field, and again, blur it without adding a value, then we see the error styling for both fields and the error message. So in this lesson we learned that we can add standard HTML5 validation attributes to controls in our template driven form and Angular will automatically manage the validation of these fields for us. We also saw that we can provide error styling using the ng-invalid class names that will be automatically added to a failed when it's invalid. Lastly we looked at how we can take control of this validation ourselves if necessary using the FormGroup and FromControl APIs. Thanks for watching.

Back to the top