In this lecture, we are going to output a friendlier message to the user if their input is invalid
or able to validate the input successfully.
The error message isn't the most magnificent thing in the world.
We will want to provide friendlier feedback to the user when it comes to handling feedback.
Angular expects us to handle outputting error messages.
It will not generate a message for us to get started.
Open the register template file.
We are going to be displaying an error for every rule.
We will start with the required rule on the paragraph element, which is below the input element for
the name.
We will add an NGF directive.
The condition will be the following register form controls dot name DOT airs question mark.
Dot required.
We are adding optional chaining to the errors property.
It could potentially be set, you know, if it is angular, will interpret a no value as a false value
without the optional chain.
Operator, we may receive an error.
It's because JavaScript will attempt to access the required property on a no value.
Optional chaining will prevent an undefined error from being thrown for every message we add.
We should always check if the rule was broken.
We don't want to render error messages if the validation passes.
Otherwise, we may confuse the user.
If there is an error, let's send a friendly message inside the paragraph elements.
We will replace the expression with the following message field is required.
One last thing we will add a class called text read 400.
This color should help the user identify the error.
Typically, red is a color associated with errors.
We have two rules on the input for the name.
We've handled the first rule.
The other validation rule was the minimum length validation.
This validation function will require new value to have a minimum length of characters.
We should output an error to tell the user their input needs to be longer.
The template for handling this error message will be similar to the template for the required validation
function.
We can make a copy of the paragraph tag.
Instead of checking the required property, we will check the min length property.
This might sound strange, but make sure it the letter L is lowercase in the controls object.
The word mid-length is all lowercase letters.
However, in our class, the same function has a capital L..
It's a bizarre inconsistency.
It can be easy to overlook after updating the condition.
We can move on to the message.
The message will be the following the value you inputted is blank characters long.
We need to replace the word blank with an expression.
The minimum length function will return an object with two properties.
The first property is called actual length.
It will contain the current length of the input.
We will replace the placeholder with the following expression register form dot controls.
Dot name dot errors.
Question mark.
Dot.
Actual length.
Next, we need to tell our users the minimum length, we will add the following message.
It must be at least blank characters long.
The expression for the placeholder will be the following register form dot control's dot name.
Dot errors question mark.
Dot required length.
These two properties will help us generate a message to let the user know how to satisfy the validator
after making those changes.
Let's test our form.
Immediately, we will see the error message from the required validator, the minimum length validator
does not run on inputs with a length of zero.
For this reason, we won't see an error message appear alongside the required validator.
If we type a single character, the first error message disappears in its place.
The minimum length validator will return in error.
Lastly, if we type more than three characters, the message goes away.
We have a completely valid input.
The error messages are almost perfect in the next lecture.
We will make one more change to our error message to improve user experience.