[Angular2 Form] Display Validation and Error Messaging in Angular 2

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

 

First, you can use 'ngModel' from 'FormsModule' from angualr2 build module.

<section>
  Min length & required: <input type="text" [(ngModel)]="message" #messageRef="ngModel" required minlength="5">
  <pre>
    Errors: {{messageRef.errors | json}}
    Valid: {{messageRef.valid}}
  </pre>
  <div *ngIf="!messageRef.valid">
    <div *ngIf="messageRef.errors?.required">This field is required</div>
    <div *ngIf="messageRef.errors?.minlength">Min length is {{messageRef.errors?.minlength.requiredLength}}, but now only {{messageRef.errors?.minlength.actualLength}}</div>
  </div>
  <br />
  <hr/>

  <button md-button class="md-raised">Add</button>
</section>

 

Github