Angular custom directives for validation
npm install ngx-custom-validatorsAngular Custom Validators, forked from ng2-validation.
Directives for form validation (template or model driven).
``bash`
npm i ngx-custom-validators --save
- maxlength
- minlength
- pattern
- required
- array length
- base64
- credit card
- date
- date ISO
- digits
- email
- equal
- included in
- not included in
- 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
The paramater of each validator (if it has) can be accessible in the template with reason error message and must be greater than {{ field.errors?.reason }}.`html`
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 {
}
`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
` error messagehtml`
default: all
support
- 3
- 4
- 5
- all
` error messagehtml`
` error messagehtml`
` required error equalTo errorhtml`
` required error equalTo errorhtml`
`typescript`
public obj = { id: 1 } // OK
public obj = { name: 'baguette' } // KO
` property errorhtml`
typescript
public arr = [{ name: 'baguette' }, { name: 'croisant' }] // OK
public arr = [{ name: 'baguette' }] // KO
`html
arrayLength error
`Model driven
import
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
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
`$3
typescript
new FormControl('', CustomValidators.rangeLength([5, 9]))
`$3
typescript
new FormControl('', CustomValidators.min(10))
`$3
typescript
new FormControl('', CustomValidators.gt(10))
`$3
typescript
new FormControl('', CustomValidators.max(20))
`$3
typescript
new FormControl('', CustomValidators.lt(20))
`$3
typescript
new FormControl('', CustomValidators.range([10, 20]))
`$3
typescript
new FormControl('', CustomValidators.digits)
`$3
typescript
new FormControl('', CustomValidators.number)
`$3
typescript
new FormControl('', CustomValidators.url)
`$3
typescript
new FormControl('', CustomValidators.email)
`$3
typescript
new FormControl('', CustomValidators.date)
`$3
typescript
new FormControl('', CustomValidators.minDate('2016-09-09'))
`$3
typescript
new FormControl('', CustomValidators.maxDate('2016-09-09'))
`$3
typescript
new FormControl('', CustomValidators.dateISO)
`$3
typescript
new FormControl('', CustomValidators.creditCard)
`$3
typescript
new FormControl('', CustomValidators.json)
`$3
typescript
new FormControl('', CustomValidators.base64)
`$3
typescript
new FormControl('', CustomValidators.uuid('3'))
`$3
typescript
new FormControl('', CustomValidators.equal('xxx'))
`$3
typescript
new FormControl('', CustomValidators.notEqual('xxx'))
`$3
typescript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
`html
`$3
typescript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
`html
`$3
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
`$3
typescript
public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
arr: new FormControl('', CustomValidators.arrayLength(2))
});
`html
`$3
typescript
public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
arr: new FormControl('bread', CustomValidators.includedIn(arr))
});
`html
`$3
typescript
public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
arr: new FormControl('baguette', CustomValidators.notIncludedIn(arr))
});
`html
`$3
typescript
public pattern = /a+bc/
this.form = new FormGroup({
p: new FormControl('aabc', CustomValidators.notIncludedIn(pattern))
});
`html
`For developpers
To run the projet :
Don't forget to run and npm lint` before each pull request. Thanks !