Angular Min Max validators example with Angular2
Angular Min Max validators :: In this post we will show you how to check Min Max validators. we use Angular 2.0.0 for Min Max validators and check value is Min Max validators.
hear we pass two value and check it is between two number, if number is between then we pass positive result else we display error.
Implementation of Min Max validators directives for Angular 2.0.0. it is works with both Angular forms DOM and validation. These two validator directives are absent from initial Angular 2.0.0 @angular/forms/src/validators.ts.
How to use Angular Min Max validators
On an input field, set we need for minimum min="NUMBER" and/or maximum max="NUMBER" where "NUMBER" work a number. The validators also works with property binding, so for minimum [min]="VARIABLE" and/or maximum [max]="VARIABLE" where "VARIABLE" is "VARIABLE" for a local class variable.
Html code for Min Max validators example with Angular2
<div class="container-fluid">
<p></p>
<div class="col-md-5">
<form class="form-inline row gutter">
<div class="form-group">
<label>Min</label>
<input name="min" type="number" class="form-control" [(ngModel)]="minv" (ngModelChange)="fixMin()">
</div>
<div class="form-group">
<label>Max</label>
<input name="max" type="number" class="form-control" [(ngModel)]="maxv" (ngModelChange)="fixMax()">
</div>
</form>
<form class="row gutter" [ngClass]="{ 'has-error' : val.errors}" #valForm="ngForm" >
<label>Number between {{minv}} and {{maxv}}</label>
<input class="form-control" name="val" #val="ngModel" type="number" [min]="minv" [max]="maxv" [(ngModel)]="numval" >
</form>
<div *ngIf="val.errors" class="row gutter">
<label>Error</label>
<p>{{val.errors | json}}</p>
</div>
</div>
</div>
You also like : Angular Rich Text Editor using Simditor