Use built in validation for required inputs.
- [Narrator] I'd like to make sure that we can't submit a form with an empty first name or a 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, and for the second property I'll add in validators .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 were 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.valid. Let's try that. So back on line 22 in our onSubmit function, let's console log this.form .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 the highlight on the input if that specific 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 ngClass 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 will take in an object where we specify the class, so that'll be called error, and then the condition which will be form.controls .first Name .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, they 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 touched property as well by adding another condition.
So on line four I'll add that second condition next to invalid, which will be form. Controls. firstname .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 ngClass 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 registercomponent.ts and below on submit I'll add a new function called isValid, 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 isValid 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 I the control name, in this case its first name. And now since we're 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. And 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 ngClass property we set up for first name on line four, and I'll copy it on line seven, ten, thirteen, and sixteen. 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, then finally confirm password. And now let's give it 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 app infrastructure
- Creating and configuring the Angular 2 project
- Displaying data in Angular
- Refining the layout
- Creating the ASP.NET Core project
- Creating a controller with ASP.NET Core
- Creating a nav bar
- Registering users
- Authorizing resources
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: The following topics were updated: setting up the app infrastructure, displaying data in Angular 2, getting data from ASP.NET Core, creating a controller with ASP.NET Core, and authorizing resources.