In this lecture, we were going to be performing form validation on our form.
Validation is the process of checking if a value is in the correct format.
For example, if we ask the user for an email, the email should contain the at symbol and domain if
a value does not pass a set of rules.
It is considered invalid.
Validation is necessary for almost any form.
We can use reactive forms to perform validation on the client side, which saves users from waiting
for our response from the server.
They'll be able to receive immediate feedback.
We'll want to ensure every input in the form contains valid values.
Angular comes with validators out of the box.
Validators are functions that will check a value against some rules.
A Boolean value is returned based on whether the inputs value passes, the validators rules.
We will start with the name field.
Open the register component class file.
Anglers validator functions can be found under the angular forms package from the Angular Forms package.
We will add the validators object.
Every validation function can be found under this object in the resource section of this lecture, I
provide a link to an official list of validation functions from Angular.
We will be exploring most of these validators throughout this course.
The two validators we're interested in are the men and required validator functions.
Let's give them a try.
Switch back to the editor.
We can apply validators to controllers in the new instances of the form control object.
There are additional optional arguments we can add.
The second argument is an array of validator functions to run the value through let's pass in an array.
The first function we will pass in is the validators dot required function.
The required validator will check if the value has a value.
It will not allow a no undefined or empty string value.
This validator will force a value.
Otherwise, the user will not be able to submit the form.
Let's add another validators called validators dot mid-length.
The mid-length function will check if a string meets the minimum length of characters, most names are
longer than three characters.
We should make sure the user is inputting a name longer than three characters.
We can configure the length by passing in a number to this function.
We will pass in the number three.
The minimum length function is not to be confused with the minimum function, Angular has two functions
for handling the length of a value the minimum length function handle strings, whereas the minimum
function handles numbers.
These functions will automatically be called by angular whenever the input changes.
Some validator functions have optional arguments for further configuration.
You can consult the documentation for the arguments of a validator function.
We will be exploring more rules throughout this section.
For now, we are going to limit the name field to these two rules.
Let's refresh the page.
Open the developer tools.
Let's check out the status property on the register form object.
You can find it under the register component.
Unlike before, the saddest property will be set to invalid, Angular will automatically enforce our
rules when the component gets loaded.
Let's try typing inside the name field with a single character.
After doing so, the field remains invalid.
It isn't until we've satisfied the requirements of the rules.
After typing in more than three characters, these status property has changed to valid.
Keep in mind that this property will tell us if the entire form is valid if another field had invalid
values.
This property would remain invalid if we want to check the validity of a specific control.
We need to look inside the controls object.
The controls object contains a list of the controllers registered under the form group.
Inside the name controller, we will find a property called status.
As we can see, the status property is set to valid, angular gives us plenty of information for verifying
our forms.
We should start handling errors before we get two errors.
I want to mention one more thing.
Validators can be detected from our template.
Some of them support HTML5 attributes.
Back in the editor, open the register a component template file.
On the input element for the name, we can add HTML five attributes for validating inputs.
Angular will override the behavior of the browser's validation mechanism.
It will handle validating the input.
Not all HTML five attributes are supported.
The documentation will tell you which attributes it can handle.
The minimum length validator function can be added as an attribute on the input element.
We will add the mean length attribute.
Its value will be three.
Back in the component class file, we can remove the minimum length validator function from the array.
Angular will automatically run our value through the minimum length validator function.
It'll detect the attribute on the input and run the value through the appropriate validator.
Let's try testing the form.
If we type a single character into the input, the form should be invalid.
We can verify the validity of the form through the dev tools.
In most cases, you will usually add your validation rules in the class or template.
It's not common to have them separate.
I'm going to leave the minimum length attribute on the input element for demonstration purposes.
It's great that angular gives us flexibility with where we can add validation rules in the next lecture.
We will start handling errors.