Framework to create angular application
npm install @narik/custom-validators
bash
npm i @narik/custom-validators
`
Validators
Angular built-in validators
- maxlength
- minlength
- pattern
- required
Custom validators
- 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
Usage
The paramater of each validator (if it has) can be accessible in the template with reason.
`html
error message and must be greater than {{ field.errors?.reason }}
`
Template driven
import FormsModule and NarikCustomValidatorsModule in app.module.ts
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NarikCustomValidatorsModule } from '@narik/custom-validators';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, FormsModule, NarikCustomValidatorsModule],
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
`
`html
error message
`
$3
`html
error message
`
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$3
`html
error message
`
$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
`
$3
`typescript
public obj = { id: 1 } // OK
public obj = { name: 'baguette' } // KO
`
`html
property error
`
$3
`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 '@narik/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 : npm start
Don't forget to run npm test and npm lint` before each pull request. Thanks !