Adding more validation

Angular provides several out-of-the-box validators, including:

• required
• minLength
• maxLength
• email
• pattern

For the complete list of out-of-the box validators, see the documentation for the Validators class at https://angular.io/api/forms/Validators.

We've seen how the required validator works. Now, let's look at two of the other out-of-the-box validators: minLength and maxLength. In addition to making it required, we want the title of the workout to be between 5 and 20 characters (we'll look at the pattern validator a little later in this chapter).

So, in addition to the required attribute we added previously to the title input box, we will add the minLength attribute and set it to 5, and add the maxLength attribute and set it to 20, like so:

<input type="text" . . . minlength="5" maxlength="20" required> 

Then, we add another label with a message that will display when this validation is not met:

<label *ngIf="(title.control.hasError('minlength') || title.control.hasError('maxlength')) && workout.title.length > 0" class="alert alert-danger validation-message">Title should be between 5 and 20 characters long.</label>