Description
Angular5 custom validation, inspired by jQuery validation, this is the modified version of the ng2-validation from yuyang, it is compiled for angular5.
Install
npm install ng5-validation --save
Systemjs
' ng5-validation ' : ' npm:ng5-validation/bundles/ng5-validation.umd.js '
Validators
angular2 built-in validators
required
minlength
maxlength
pattern
custom validators
rangeLength
min
gt
gte
max
lt
lte
range
digits
number
url
email
date
minDate
maxDate
dateISO
creditCard
json
base64
phone
uuid
equal
notEqual
equalTo
notEqualTo
Usage
template driven
import FormsModule
and CustomFormsModule
in app.module.ts
import { NgModule } from ' @angular/core ' ;
import { BrowserModule } from ' @angular/platform-browser ' ;
import { FormsModule } from ' @angular/forms ' ;
import { CustomFormsModule } from ' ng2-validation '
import { AppComponent } from ' ./app.component ' ;
@ NgModule ( {
imports : [ BrowserModule , FormsModule , CustomFormsModule ] ,
declarations : [ AppComponent ] ,
bootstrap : [ AppComponent ]
} )
export class AppModule {
}
rangeLength
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ rangeLength ]= " [5, 9] " />
< p * ngIf = " field.errors?.rangeLength " > error message </ p >
min
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ min ]= " 10 " />
< p * ngIf = " field.errors?.min " > error message </ p >
gt
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ gt ]= " 10 " />
< p * ngIf = " field.errors?.gt " > error message </ p >
gte
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ gte ]= " 10 " />
< p * ngIf = " field.errors?.gte " > error message </ p >
max
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ max ]= " 20 " />
< p * ngIf = " field.errors?.max " > error message </ p >
lt
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ lt ]= " 20 " />
< p * ngIf = " field.errors?.lt " > error message </ p >
lte
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ lte ]= " 20 " />
< p * ngIf = " field.errors?.lte " > error message </ p >
range
< input type = " number " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ range ]= " [10, 20] " />
< p * ngIf = " field.errors?.range " > error message </ p >
digits
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " digits />
< p * ngIf = " field.errors?.digits " > error message </ p >
number
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " number />
< p * ngIf = " field.errors?.number " > error message </ p >
url
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " url />
< p * ngIf = " field.errors?.url " > error message </ p >
email
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " email />
< p * ngIf = " field.errors?.email " > error message </ p >
date
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " date />
< p * ngIf = " field.errors?.date " > error message </ p >
minDate
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " minDate = " 2016-09-09 " />
< p * ngIf = " field.errors?.minDate " > error message </ p >
maxDate
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " maxDate = " 2016-09-09 " />
< p * ngIf = " field.errors?.maxDate " > error message </ p >
dateISO
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " dateISO />
< p * ngIf = " field.errors?.dateISO " > error message </ p >
creditCard
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " creditCard />
< p * ngIf = " field.errors?.creditCard " > error message </ p >
json
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " json />
< p * ngIf = " field.errors?.json " > error message </ p >
base64
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " base64 />
< p * ngIf = " field.errors?.base64 " > error message </ p >
phone
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " phone = " CN " />
< p * ngIf = " field.errors?.phone " > error message </ p >
details see libphonenumber
uuid
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ uuid ]= " 'all' " />
< p * ngIf = " field.errors?.uuid " > error message </ p >
default : all
support
equal
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ equal ]= " 'xxx' " />
< p * ngIf = " field.errors?.equal " > error message </ p >
equal
< input type = " text " [( ngModel )]= " model.field " name = " field " # field = " ngModel " [ notEqual ]= " 'xxx' " />
< p * ngIf = " field.errors?.notEqual " > error message </ p >
equalTo
< input type = " password " ngModel name = " password " # password = " ngModel " required />
< p * ngIf = " password.errors?.required " > required error </ p >
< input type = " password " ngModel name = " certainPassword " # certainPassword = " ngModel " [ equalTo ]= " password " />
< p * ngIf = " certainPassword.errors?.equalTo " > equalTo error </ p >
notEqualTo
< input type = " text " ngModel name = " password " # password = " ngModel " required />
< p * ngIf = " password.errors?.required " > required error </ p >
< input type = " password " ngModel name = " certainPassword " # certainPassword = " ngModel " [ notEqualTo ]= " password " />
< p * ngIf = " certainPassword.errors?.equalTo " > equalTo error </ p >
model driven
import ReactiveFormsModule
in app.module.ts
import { NgModule } from ' @angular/core ' ;
import { BrowserModule } from ' @angular/platform-browser ' ;
import { ReactiveFormsModule } from ' @angular/forms ' ;
import { AppComponent } from ' ./app.component ' ;
@ NgModule ( {
imports : [ BrowserModule , ReactiveFormsModule ] ,
declarations : [ AppComponent ] ,
bootstrap : [ AppComponent ]
} )
export class AppModule {
}
import CustomValidators
in app.component.ts
import { Component } from ' @angular/core ' ;
import { FormGroup , FormControl } from ' @angular/forms ' ;
import { CustomValidators } from ' ng2-validation ' ;
@ Component ( {
selector : ' app ' ,
template : require ( ' ./app.html ' )
} )
export class AppComponent {
form : FormGroup ;
constructor ( ) {
this . form = new FormGroup ( {
field : new FormControl ( ' ' , CustomValidators . range ( [ 5 , 9 ] ) )
} ) ;
}
}
< input type = " text " formControlName = " field " />
< p * ngIf = " demoForm.from.controls.field.errors?.rangeLength " > error message </ p >
rangeLength
new FormControl ( ' ' , CustomValidators . rangeLength ( [ 5 , 9 ] ) )
min
new FormControl ( ' ' , CustomValidators . min ( 10 ) )
gt
new FormControl ( ' ' , CustomValidators . gt ( 10 ) )
max
new FormControl ( ' ' , CustomValidators . max ( 20 ) )
lt
new FormControl ( ' ' , CustomValidators . lt ( 20 ) )
range
new FormControl ( ' ' , CustomValidators . range ( [ 10 , 20 ] ) )
digits
new FormControl ( ' ' , CustomValidators . digits )
number
new FormControl ( ' ' , CustomValidators . number )
url
new FormControl ( ' ' , CustomValidators . url )
email
new FormControl ( ' ' , CustomValidators . email )
date
new FormControl ( ' ' , CustomValidators . date )
minDate
new FormControl ( ' ' , CustomValidators . minDate ( ' 2016-09-09 ' ) )
maxDate
new FormControl ( ' ' , CustomValidators . maxDate ( ' 2016-09-09 ' ) )
dateISO
new FormControl ( ' ' , CustomValidators . dateISO )
creditCard
new FormControl ( ' ' , CustomValidators . creditCard )
json
new FormControl ( ' ' , CustomValidators . json )
base64
new FormControl ( ' ' , CustomValidators . base64 )
phone
new FormControl ( ' ' , CustomValidators . phone ( ' zh-CN ' ) )
uuid
new FormControl ( ' ' , CustomValidators . uuid ( ' 3 ' ) )
equal
new FormControl ( ' ' , CustomValidators . equal ( ' xxx ' ) )
notEqual
new FormControl ( ' ' , CustomValidators . notEqual ( ' xxx ' ) )
equalTo
let password = new FormControl ( ' ' , Validators . required ) ;
let certainPassword = new FormControl ( ' ' , CustomValidators . equalTo ( password ) ) ;
this . form = new FormGroup ( {
password : password ,
certainPassword : certainPassword
} ) ;
< form [ formGroup ]= " form " >
< input type = " password " formControlName = " password " />
< p * ngIf = " form.controls.password.errors?.required " > required error </ p >
< input type = " password " formControlName = " certainPassword " />
< p * ngIf = " form.controls.certainPassword.errors?.equalTo " > equalTo error </ p >
</ form >
notEqualTo
let password = new FormControl ( ' ' , Validators . required ) ;
let certainPassword = new FormControl ( ' ' , CustomValidators . notEqualTo ( password ) ) ;
this . form = new FormGroup ( {
password : password ,
certainPassword : certainPassword
} ) ;
< form [ formGroup ]= " form " >
< input type = " password " formControlName = " password " />
< p * ngIf = " form.controls.password.errors?.required " > required error </ p >
< input type = " password " formControlName = " certainPassword " />
< p * ngIf = " form.controls.certainPassword.errors?.notEqualTo " > notEqualTo error </ p >
</ form >
License
MIT