首页 > 代码库 > [Angular2 Form] Display Validation and Error Messaging in Angular 2

[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

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