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="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>
  1. 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 ...

Get MEAN Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.