# Description Angular Custom Validators, forked from [ng2-validation](https://github.com/yuyang041060120/ng2-validation). Directives for form validation (template or model driven). # Installation ```bash npm i ngx-custom-validators --save ``` # Validators ## Angular built-in validators - maxlength - minlength - pattern - required ## Custom validators - array length - base64 - credit card - date - date ISO - digits - email - equal - not equal - equal to - not equal to - greater than - greater than or equal - json - less than - less than or equal - max - max date - min - min date - not equal - not equal to - number - property - range - range length - url - uuid # Usage ## Template driven import `FormsModule` and `CustomFormsModule` in *app.module.ts* ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { CustomFormsModule } from 'ngx-custom-validators'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule, FormsModule, CustomFormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } ``` ### range length - rangeLenght ```html

error message

``` ### min ```html

error message

``` ### greater than - gt ```html

error message

``` ### greater than or equal - gte ```html

error message

``` ### max ```html

error message

``` ### less than - lt ```html

error message

``` ### less than or equal - lte ```html

error message

``` ### range ```html

error message

``` ### digits ```html

error message

``` ### number ```html

error message

``` ### url ```html

error message

``` ### email ```html

error message

``` ### date ```html

error message

``` ### min date - minDate ```html

error message

``` ```html

error message

``` ### max date - maxDate ```html

error message

``` ```html

error message

``` ### date ISO - dateISO ```html

error message

``` ### credit card - creditCard ```html

error message

``` ### json ```html

error message

``` ### base64 ```html

error message

``` ### uuid ```html

error message

``` *default*: all **support** - 3 - 4 - 5 - all ### equal ```html

error message

``` ### not equal - notEqual ```html

error message

``` ### equal to - equalTo ```html

required error

equalTo error

``` ### not equal to - notEqualTo ```html

required error

equalTo error

``` ### property ```typescript public obj = { id: 1 } // OK public obj = { name: 'baguette' } // KO ``` ```html

property error

``` ### array length - ArrayLength ```typescript public arr = [{ name: 'baguette' }, { name: 'croisant' }] // OK public arr = [{ name: 'baguette' }] // KO ``` ```html

arrayLength error

``` ## Model driven import `ReactiveFormsModule` in *app.module.ts* ```typescript 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* ```typescript import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import { CustomValidators } from 'ngx-custom-validators'; @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

``` ### range length - rangeLenght ```typescript new FormControl('', CustomValidators.rangeLength([5, 9])) ``` ### min ```typescript new FormControl('', CustomValidators.min(10)) ``` ### greater than - gt ```typescript new FormControl('', CustomValidators.gt(10)) ``` ### max ```typescript new FormControl('', CustomValidators.max(20)) ``` ### less than - lt ```typescript new FormControl('', CustomValidators.lt(20)) ``` ### range ```typescript new FormControl('', CustomValidators.range([10, 20])) ``` ### digits ```typescript new FormControl('', CustomValidators.digits) ``` ### number ```typescript new FormControl('', CustomValidators.number) ``` ### url ```typescript new FormControl('', CustomValidators.url) ``` ### email ```typescript new FormControl('', CustomValidators.email) ``` ### date ```typescript new FormControl('', CustomValidators.date) ``` ### min date - minDate ```typescript new FormControl('', CustomValidators.minDate('2016-09-09')) ``` ### max date - maxDate ```typescript new FormControl('', CustomValidators.maxDate('2016-09-09')) ``` ### date ISO - dateISO ```typescript new FormControl('', CustomValidators.dateISO) ``` ### credit card - creditCard ```typescript new FormControl('', CustomValidators.creditCard) ``` ### json ```typescript new FormControl('', CustomValidators.json) ``` ### base64 ```typescript new FormControl('', CustomValidators.base64) ``` ### uuid ```typescript new FormControl('', CustomValidators.uuid('3')) ``` ### equal ```typescript new FormControl('', CustomValidators.equal('xxx')) ``` ### not equal - notEqual ```typescript new FormControl('', CustomValidators.notEqual('xxx')) ``` ### equal to - equalTo ```typescript let password = new FormControl('', Validators.required); let certainPassword = new FormControl('', CustomValidators.equalTo(password)); this.form = new FormGroup({ password: password, certainPassword: certainPassword }); ``` ```html ``` ### not equal to - notEqualTo ```typescript let password = new FormControl('', Validators.required); let certainPassword = new FormControl('', CustomValidators.notEqualTo(password)); this.form = new FormGroup({ password: password, certainPassword: certainPassword }); ``` ```html ``` ### property ```typescript public obj = { id: 1 }; this.form = new FormGroup({ obj: new FormControl('', CustomValidators.property('id')) // For multiple properties check obj: new FormControl('', CustomValidators.property('id,value,name')) }); ``` ```html ``` ### array length - ArrayLength ```typescript public arr = [{ name: 'baguette' }, { name: 'croisant' }] this.form = new FormGroup({ arr: new FormControl('', CustomValidators.arrayLength(2)) }); ``` ```html ``` # For developpers To run the projet : `npm start` Don't forget to run `npm test` and `npm lint` before each pull request. Thanks !

ng4-validators

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past