In this lecture, we will start providing feedback to the user if their value is invalid.
Currently, users have no idea how to fix their errors whenever they fill out a field incorrectly.
Our error messages should be concise and helpful.
Before we start rendering messages, we need to look at what we'll be dealing with.
Errors can be accessed from their respective controllers.
Angular will give us two options for accessing a controllers errors.
Let's explore both options.
Open the register component template file.
We will long the errors for the name input fields below the input element.
We will add a pair of paragraph tags.
Inside these tags, let's add an expression, the expression will be the following register form dot
control's name.
Question mark.
Dot errors.
We can access our controls via the controls property.
There is an alternative syntax you may see in the wild.
Instead of typing controls dot name, we can replace this part of the code with the get function.
They get function has one argument, which is the name of the controller.
In this example, we can pass in name.
The value returned by this function is the exact same object we were accessing from the controls object.
Both syntax is are valid.
I prefer accessing a controller via the controls object.
I will revert this expression.
The get function was introduced for more complex control paths.
You may find it useful when you're designing large, complex input components.
For our purposes, we won't be designing a complex component.
Accessing the controller through the controls object will suffice.
Back to the task at hand.
Errors are stored under the errors property.
The errors property will store an object.
Since we're outputting an object, we should add the JSON pipe.
You may be wondering, why did we end the optional training operator?
It has to do with the value stored in the Air's object to better understand.
Let's check out the object in the browser.
Initially, the input will be invalid because it's empty, the required rule will break the errors,
property will be an object of information on the air.
The format for an error is the name of the rule broken as the property.
The value will store additional information.
In this case, the required property will be set to true.
This value indicates the rule is broken.
Let's try typing inside the input.
If we type one character, the required rule will go away because the validation has passed.
However, we get a completely different object this time.
The minimum length rule is broken.
The format for the rule is different.
The error will tell us the minimum length and the current length of the value.
If we type more than three characters, the errors property will be set to null.
A no value indicates the input is completely valid.
This is why we've added the optional chain operator.
The JSON pie is expecting an object or array.
It makes TypeScript unhappy.
Errors can be challenging to deal with.
There are various values to account for.
We've only explored two validation functions.
The other validation functions format their objects differently.
We should always verify the structure of the errors object whenever trying a new rule.
It's time to handle the error in the next lecture.
We all output a friendlier message to the user.