Description

Angular9+ custom validation.

$3

Dependencies

| ng9-validation| Angular |
| ------------- |:-------------:|
| 2.x.x | 9.0.0 |
| 3.x.x | 10.0.0 |

For order versions of Angular (2.x.x -> 8.x.x) use ng2-validation

Install

``bash
npm install ng9-validation --save
`

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 'ng9-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