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

``bash
npm install ng5-validation --save
`


Systemjs

`bash
'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

`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


required error

equalTo error

`

$3

`javascript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));

this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
`

`html


required error

notEqualTo error

``

License

MIT