Use built-in validation for required inputs.
- [Instructor] I'd like to make sure that we can't submit a form with an empty first name or last name and so on. And so to do that, we can use a required validator, which will make sure that our inputs cannot be empty. So the first thing we need to do is import validators from Angular Forms. So on line two, I'll add that. Next, let's specify a required validator for our first name by using an array. The first property of the array will be the initial value as we have currently.
And the second value of the array will be the validator. So let's convert our first name. So I'll wrap that in brackets to turn it into an array. And for the second property, I'll add in validators dot required. Let's give that a try. Let's try to hit register. And it went through. We didn't get a warning like we did when entering an invalid email. And that's because this email validation is built into the template.
And it comes with that automatic warning. Whereas when we're using reactive validation, we have to implement our own. So to test whether our reactive form is valid or not, we'll need to console log form dot valid. Let's try that. So back on line 22 in our on submit function, let's console log this dot form dot valid. Let's give this a try. If I hit register with an empty form, it's false.
If I place a character in the first name and try again, it's now true, since we met the validator requirements. So now we need to show which inputs are valid, and which are not to the user. So let's create a highlight on the input, if that specific input is invalid. To do that, let's make a new style that will highlight the input in red. Inside our component decorator, let's add a new property. I'll add this below line seven, and I'll call it styles.
And this will take an array of different styles, and I'll use a template literal, as before. Now let's add an error style with a background that has a light red color. Now that we have our error style, we can go back to our HTML and toggle it if an input is invalid. So let's start with the first input on line four.
We can use an NG class to toggle the error style. So I'll use open bracket NG class, which will toggle the specified class on or off, whether the input is valid or not. And it'll take in an object where we specify the class, so that'll be called error. And then the condition, which will be form dot controls dot first name dot invalid.
Let's give that a try. As we can see, it's already highlighted red because it's invalid by default. If we put in a value, it becomes valid and it's no longer highlighted. If we did this for all of the inputs, it would all start off with an error styles, and we would like to give the user a chance to fill in the inputs correctly initially. So let's not add the error style until they have modified or touched the input. Back in our HTML, let's check for the touch property, as well by adding another condition.
So on line four, I'll add that second condition next to invalid, which will be form dot controls dot first name dot touched. So if we haven't touched the input, then the error will not trigger. But if we do and move away, and it's still invalid, it will trigger. Let's refactor this a bit.
Because if we put this NG class directive in all our inputs, we would have a lot of duplicate code. We will create a function in our component class that will perform these validation checks. And we will pass in the name of the control to perform the validation check on. So let's go inside our register component dot TS, and below on submit, I'll add a new function called is valid, and we'll pass in the control. And then we'll simply return the two condition checks we have inside our HTML.
So I can just copy those. And we can access our form through this, and both conditions. And then we can access the specific control through the controls index, and I'll pass in our control parameter. We can now use is valid in our HTML and pass in the control name as the parameter.
Let's go ahead and replace these two conditions with our single condition on line four. And we'll pass in the control name. In this case, it's first name. And now since we are accessing the specific control through the index, we no longer need to have first name specified, so let's take that out. And let's give this a try. If we touch first name and we leave it invalid, we can see it's getting highlighted correctly.
At this point, let's go ahead and duplicate for the rest of the inputs. So I'll copy the NG class property we set up for first name on line four, and I'll copy it on line seven, 10, 13, and 16. And before we give this a try, I'll need to change the names so that they match the control names we specified earlier under form control name.
So let's change first name to last name. Then to email. Password, and finally confirm password. And now let's give that a try. But it's still only working for first name. And that's because we have to add a validator for each property inside our model. Currently, only first name has a validator.
So I'll copy that and paste it for the remainder of the inputs. Let's give that a try. And as you can see, it's working for all the other fields. Next, let's take a look at how to match the password and confirm password with a custom validator.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.