Description
Angular2 custom validation, inspired by jQuery validation.
Install
npm install ng2-validation --save
Systemjs
'ng2-validation': 'npm:ng2-validation/bundles/ng2-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
