Ngx Validator Pack
Ngx Validator Pack is a collection of validators designed
to simplify usage and allow quick customization.
## Table of Contents
- [Ngx Validator Pack](#ngx-validator-pack) - [_A pack of validators for Angular Form Group and Form Controls_](#a-pack-of-validators-for-angular-form-group-and-form-controls)
- [Installation](#install)
- [Forms Validators](#reactive-forms-validators)
- [RegExp Validators](#regexp-validators)
- [Date Validators](#date-validators)
- [Conditional Validators](#conditional-validators)
- [Prebuilt Validators](#prebuilt-validators)
- [Address](#address)
- [Alphabet](#alphabet)
- [Date](#date)
- [Email](#email)
- [IP Address](#ip-address)
- [Numeric](#numeric)
- [Special Characters](#special)
- [Passport](#passport)
- [Password](#password)
- [Phone](#phone)
- [Space](#space)
- [Social Security Number](#ssn)
- [Time](#time)
- [URL](#url)
- [Zip Code](#zip-code)
- [Cross Field Validators](#cross-field-validators)
- [Custom Messaging](#custom-messaging)
- [Custom Messages for Forms Validators](#ngx-custom-messages)
- [Custom Messages for Prebuilt Validators](#ngx-custom-prebuilt-messages)
- [Custom Messages for Cross Field Validator](#ngx-custom-fb-messages)
- [Showing validation](#showing-validation)
- [Styling](#styling)
- [PrimeNG Implementation](#primeng)
## Installation
```bash
npm install --save @dynamize/ngx-validator-pack
```
## Reactive Forms Validators
### RegExp Validators
regexpValidator returns an error if the value does not match the regular expression
regexpValidator Example:
```javascript
import { regexpValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
regexpInput: [null, [regexpValidator(/(s|regexp)/, '!!')]]
})
}
```
In this example we are checking if the input is a word regexp, if not we will get an error.
regexpValidator Example ?:
```javascript
import { regexpValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
regexpNotInput: [null, [regexpValidator(/(s|regexp)/, '!')]]
})
}
```
In this example we are checking if the input is not a word regexp, if not we will get an error.
Additionally we can supply two other optional parameters, first being the name of the error and
the second a string which will represent the error content / message.
### Date Validators
We have three types of validators to compare date values (date picker values).
earlierThenValidator checks if a picked date is earlier then a give one.
laterThenValidator checks if a picked date is later then a give one.
compareToValidator compares the value of a given input to the value of the form control
whose name was given as a first parameter. The second parameter is a string representing
the comparison.
earlierThenValidator Example:
```javascript
import { earlierThenValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
earlierDate: [null, [earlierThenValidator(new Date())]]
})
}
```
laterThenValidator Example:
```javascript
import { laterThenValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
laterDate: [null, [laterThenValidator(new Date())]]
})
}
```
compareToValidator Example:
```javascript
import { compareToValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
controlDate: [null],
compareDate: [null, [compareToValidator("controlDate", ">=")]]
})
}
```
The available comparisons are: '<', '>', '==', '===', '<=', '>='.
Additionally we can supply two other optional parameters, first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params).
### Conditional Validators
We have three conditional validators we can use:
requiredWhenValidator excepts a conditional function or a boolean value,
and will return an error if a conditional is satisfied.
linkToValidator links to another form control in the form group and will
return an error if a given form control does not have a value but a linked one does.
linkedToValidator returns an error if a form control it is linked to does
not have a value but a given control does.
requiredWhenValidator Example:
```javascript
import { requiredWhenValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
requiredWhen: [null, [requiredWhenValidator(this.randomBool())]]
})
}
```
linkToValidator and linkedToValidator Example:
```javascript
import { linkToValidator, linkedToValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
linkTo: [null, [linkToValidator("linkedTo")]],
linkedTo: [null, [linkedToValidator("linkTo")]],
})
}
```
Additionally we can supply two other optional parameters, first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params).
## Prebuilt Validators
There is a number of prebuilt validators for most common text input validations.
### Address
We can use addressValidator to validate the most common USA address format
(example: 3344 W Alameda Avenue, Lakewood, CO 80222).
```javascript
import { addressValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
address: [null, [addressValidator()]]
})
}
```
### Alphabet
alphabetOnlyValidator will return an error if any charter other then alphabetical are
in the given input.
```javascript
import { alphabetOnlyValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
alphabet: [null, [alphabetOnlyValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Date
We have two validators to validate text inputs for a date format:
dateDD_MM_YYYYValidator checks for following formats: dd-MM-YYYY, dd.MM.YYYY or
dd/MM/YYYY.
dateYYYY_MM_DDValidatorchecks for following format YYYY-MM-dd.
```javascript
import { dateDD_MM_YYYYValidator, dateYYYY_MM_DDValidator} from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
dateDDMMYYYY: [null, [dateDD_MM_YYYYValidator()]],
dateYYYYMMDD: [null, [dateYYYY_MM_DDValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Email
We can use emailValidator to validate a text input for an email format.
(example: local-part@domain.com)
```javascript
import { emailValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
email: [null, [emailValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### IP Address
We can preform ip address validation on a text input with the following validators:
ipAddressValidator preforms a check for both IPv4 and IPv6 formats.
(format examples: x.x.x.x or y:y:y:y:y:y:y:y)
iPv4Validator preforms a check for a IPv4 format. (x.x.x.x)
iPv6Validator preforms a check for a IPv6 format. (y:y:y:y:y:y:y:y)
```javascript
import {
ipAddressValidator,
iPv4Validator,
iPv6Validator
} from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
ipAddress: [null, [ipAddressValidator()]],
ipv4: [null, [iPv4Validator()]],
ipv6: [null, [iPv6Validator()]]
})
}
```
### Numeric
numericsOnlyValidator will return an error if any charter other then numerical are
in the given input.
```javascript
import { numericsOnlyValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
numeric: [null, [numericsOnlyValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Special Characters
noSpecialsValidator will return an error if any spacial charter are in the given input.
```javascript
import { noSpecialsValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
noSpecial: [null, [noSpecialsValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Passport
passportValidator checks if the value is in a proper passport format.
(you can check a list of passport format examples here: list of passport examples)
```javascript
import { passportValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
passport: [null, [passportValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Password
passwordValidator checks for password strength on a given input.
(Has at least 1 lowercase letter, 1 uppercase letter, 1 number, 1 special character and has
length of at least 8 characters).
```javascript
import { passwordValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
password: [null, [passwordValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Phone
phoneNumberValidator checks for following formats: (000) 000 0000, (000)-000-0000,
(000) 000-0000, (000)000 0000, (000)000-0000.
```javascript
import { phoneNumberValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
phone: [null, [phoneNumberValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Space
spaceValidator will return an error if an input has a space charter.
spaceRestrictionValidator will return an error if a given input starts or ends with a space charter.
```javascript
import { spaceValidator, spaceRestrictionValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
space: [null, [spaceValidator()]],
spaceRes: [null, [spaceRestrictionValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Social Security Number
ssnValidator will check for the following ssn formats: AAA-GGG-SSSS or AAAGGGSSSS.
```javascript
import { ssnValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
ssn: [null, [ssnValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Time
we can use the following three validators to validate text inputs for time formats:
timeHH_MM_12Validator validates if the value is in HH:MM 12-hour format with
optional leading 0.
timeHH_MM_24Validator validates if the value is in HH:MM 24-hour format with
optional leading 0.
timeHH_MM_SS_24Validator validates if the value is in HH:MM:SS 24-hour format.
```javascript
import {
timeHH_MM_12Validator,
timeHH_MM_24Validator,
timeHH_MM_SS_24Validator
} from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
timeHHMM12: [null, [timeHH_MM_12Validator()]],
timeHHMM24: [null, [timeHH_MM_24Validator()]],
timeHHMMSS24: [null, [timeHH_MM_SS_24Validator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### URL
urlValidator checks the given input for a url format.
```javascript
import { urlValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
url: [null, [urlValidator()]]
})
}
```
It has two optional parameters first being the name of the error and
the second a string which will represent the error content / message.
Please check the example here: [additional parameters example](#additional-params-prebuilt).
### Zip Code
zipCodeValidator checks for a valid zip code format.
(format examples: 00000 or 00000-0000)
```javascript
import { zipCodeValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
zipCode: [null, [zipCodeValidator()]]
})
}
```
## Cross Field Validators
The following validators preform validation on a Form Group rather the Form Control.
They all take two parameters, first one being the name of the control which should be required
if the condition is met and the second parameter is the name of the control which is being checked.
requiredIf assigns a required status to a given control if the control which is being checked has a value and the given control does not.
requiredIfNot assigns a required status to a given control if the control which is being checked does not have a value and the given control does.
requiredEther assigns a required status to a given control if the control which is being checked and a given control do not have values.
```javascript
import { requiredEther, requiredIf, requiredIfNot } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
compare: [null],
if: [null],
ifNot: [null],
ether: [null]
}, {
validators: [
requiredIf('if', 'compare'),
requiredIfNot('ifNot', 'compare'),
requiredEther('ether', 'compare')
]
})
}
```
## Custom Messaging
One of the main reason for creating this library if not the main reason is the ability to
have a custom error message for each individual implementation of the validators. Let's
explore this further in this section.
### Custom Messages for Reactive Forms Validators
All reactive forms validators take addition optional parameters.
First one being the name of the error we would like to use.
Second one is the error messages we would like to use.
In this example we are using regexpValidator and regexpNotValidator, but implementation is
identical for all other ngx validators.
```javascript
import { regexpValidator, regexpNotValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
regexpInput: [
null,
[
regexpValidator(
/(s|regexp)/,
'example_regexp_error', // Error name
'RegExp validation works!' // Error Message
),
],
],
regexpNotInput: [
null,
[
regexpNotValidator(
/(s|regexp)/,
'example_regexp_not_error', // Error name
'RegExp Not validation works!' // Error Message
),
],
],
});
}
```
### Custom Messages for Prebuilt Validators
Custom error messages are also available for prebuilt validators. The implementation
is slightly different as they don't have any required parameters, they in fact only two
optional ones.
First one being the name of the error we would like to use.
Second one is the error messages we would like to use.
In this example we are using the addressValidator, but implementation is
identical for all other ngx validators.
```javascript
import { addressValidator } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
address: [null, [addressValidator(
'address_error_example', // Error name
'Wrong address input!' // Error Message
)]]
})
}
```
### Custom Messages for Cross Field Validator
Cross Field Validator also have an option for custom messaging. But the implementation is
slightly different again.
The only take one optional parameter which is a custom error message.
```javascript
import { requiredEther, requiredIf, requiredIfNot } from '@dynamize/ngx-validator-pack';
ngOnInit(): void {
this.exampleForm = this.fb.group({
compare: [null],
if: [null],
ifNot: [null],
ether: [null]
}, {
validators: [
requiredIf(
"if",
"compare",
"Compere input has a value"
),
requiredIfNot(
"ifNot",
"compare",
`Compere input doesn't have a value`
),
requiredEther(
"ether",
"compare",
"Nether the compere input nor this one have a value."
),
],
})
}
```
## Showing validation
If you would like to show the validation error message to the user, a really convenient way is
using a showValidation Directive.
Placing it on an input will automatically show the error message under the input it self.
showValidation Example:
```HTML
```
The result of the code above is:
### Styling
You can pass an errorStyle object to customize the look of the validation error:
```HTML
```
The result of the code above is:
The available style options are:
| Name | CSS representation |
| ---------------- | ------------------ |
| font_size | font-size |
| font_family | font-family |
| color | color |
| background_color | background-color |
| border | border |
| border_radius | border-radius |
| width | width |
| height | height |
### PrimeNG Implementation
showValidation Directive is PrimeNg compatible:
```HTML
```
The result of the code above is:
