Validating data with Angular form properties

Allowing users to input data into forms also allows users to input mistakes into the data. Validation is the process of checking whether any input data meets our application's expectations. In Angular, we use ngModel and its relationship to our input data-binding to inspect the state of our data and tell us whether it is valid.

Getting Ready

Let's add a title length validation to our blog post's title field. We don't want to allow any title shorter than 5 characters, or longer than 140 (we have to keep it tweet-able). We will also surface this error to our users when the title field is invalid and show them a warning with an explanation of what is wrong.

How to do it...

Let's follow the steps below to to add validations to the input fields of our blog post modal:

1. First, we will need to provide a local property for our ngModel reference on our input. We can also add required, minlength, and maxlength properties to our input for validation:

<div class...