angular2 validation
npm install ng2-validation-norbash
npm install ng2-validation --save
`
Systemjs
`bash
'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
`javascript
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 {
}
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
details see libphonenumber
$3
`html
error message
`
default: all
support
- 3
- 4
- 5
- all
$3
`html
error message
`
$3
`html
error message
`
$3
`html
required error
equalTo error
`
$3
`html
required error
equalTo error
`
model driven
import ReactiveFormsModule in app.module.ts
`javascript
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
`javascript
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]))
});
}
}
`
`html
error message
`
$3
`javascript
new FormControl('', CustomValidators.rangeLength([5, 9]))
`
$3
`javascript
new FormControl('', CustomValidators.min(10))
`
$3
`javascript
new FormControl('', CustomValidators.gt(10))
`
$3
`javascript
new FormControl('', CustomValidators.max(20))
`
$3
`javascript
new FormControl('', CustomValidators.lt(20))
`
$3
`javascript
new FormControl('', CustomValidators.range([10, 20]))
`
$3
`javascript
new FormControl('', CustomValidators.digits)
`
$3
`javascript
new FormControl('', CustomValidators.number)
`
$3
`javascript
new FormControl('', CustomValidators.url)
`
$3
`javascript
new FormControl('', CustomValidators.email)
`
$3
`javascript
new FormControl('', CustomValidators.date)
`
$3
`javascript
new FormControl('', CustomValidators.minDate('2016-09-09'))
`
$3
`javascript
new FormControl('', CustomValidators.maxDate('2016-09-09'))
`
$3
`javascript
new FormControl('', CustomValidators.dateISO)
`
$3
`javascript
new FormControl('', CustomValidators.creditCard)
`
$3
`javascript
new FormControl('', CustomValidators.json)
`
$3
`javascript
new FormControl('', CustomValidators.base64)
`
$3
`javascript
new FormControl('', CustomValidators.phone('zh-CN'))
`
$3
`javascript
new FormControl('', CustomValidators.uuid('3'))
`
$3
`javascript
new FormControl('', CustomValidators.equal('xxx'))
`
$3
`javascript
new FormControl('', CustomValidators.notEqual('xxx'))
`
$3
`javascript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));
this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
`
`html
`
$3
`javascript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));
this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
`
`html
``