[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>