Let's follow the steps below to to add validations to the input fields of our blog post modal:
- 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="form-group"> <label for="formTitleInput" class="form-control-label">Title</label> <input type="text" class="form-control" id="formTitleInput" placeholder="New Blog Post Title" name="title" [(ngModel)]="model.title" #title="ngModel" required minlength="5" maxlength="140"></div>
- Having validation errors without any sort of user feedback isn't very helpful, so we'll add some conditional error classes to our input using the ngClass directive ...