@omnidyon/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 - _A pack of validators for Angular Form Group and Form Controls_
- Installation
- Forms Validators
- RegExp Validators
- Date Validators
- Conditional Validators
- Prebuilt Validators
- Address
- Alphabet
- Date
- Email
- IP Address
- Numeric
- Special Characters
- Passport
- Password
- Phone
- Space
- Social Security Number
- Time
- URL
- Zip Code
- Check Packs
- Creating Your Own Check Pack
- Cross Field Validators
- Custom Messaging
- Custom Messages for Forms Validators
- Custom Messages for Prebuilt Validators
- Custom Messages for Cross Field Validator
- Showing validation
- Styling
- PrimeNG Implementation

Installation

``bash
npm install --save @omnidyon/ngx-validator-pack
`

Reactive Forms Validators

$3

regexpValidator returns an error if the value does not match the regular expression

regexpValidator Example:

`javascript
import { regexpValidator } from '@omnidyon/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 '@omnidyon/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.

$3

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 '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
earlierDate: [null, [earlierThenValidator(new Date())]]
})
}
`

laterThenValidator Example:

`javascript
import { laterThenValidator } from '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
laterDate: [null, [laterThenValidator(new Date())]]
})
}
`

compareToValidator Example:

`javascript
import { compareToValidator } from '@omnidyon/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.

$3

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 '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
requiredWhen: [null, [requiredWhenValidator(this.randomBool())]]
})
}
`

linkToValidator and linkedToValidator Example:

`javascript
import { linkToValidator, linkedToValidator } from '@omnidyon/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.

Prebuilt Validators

There is a number of prebuilt validators for most common text input validations.

$3

We can use addressValidator to validate the most common USA address format
(example: 3344 W Alameda Avenue, Lakewood, CO 80222).

`javascript
import { addressValidator } from '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
address: [null, [addressValidator()]]
})
}
`

$3

alphabetOnlyValidator will return an error if any charter other then alphabetical are
in the given input.

`javascript
import { alphabetOnlyValidator } from '@omnidyon/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.

$3

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 '@omnidyon/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.

$3

We can use emailValidator to validate a text input for an email format.
(example: local-part@domain.com)

`javascript
import { emailValidator } from '@omnidyon/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.

$3

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 '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
ipAddress: [null, [ipAddressValidator()]],
ipv4: [null, [iPv4Validator()]],
ipv6: [null, [iPv6Validator()]]
})
}
`

$3

numericsOnlyValidator will return an error if any charter other then numerical are
in the given input.

`javascript
import { numericsOnlyValidator } from '@omnidyon/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.

$3

noSpecialsValidator will return an error if any spacial charter are in the given input.

`javascript
import { noSpecialsValidator } from '@omnidyon/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.

$3

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 '@omnidyon/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.

$3

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 '@omnidyon/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.

$3

phoneNumberValidator checks for following formats: (000) 000 0000, (000)-000-0000,
(000) 000-0000, (000)000 0000, (000)000-0000.

`javascript
import { phoneNumberValidator } from '@omnidyon/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.

$3

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 '@omnidyon/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.

$3

ssnValidator will check for the following ssn formats: AAA-GGG-SSSS or AAAGGGSSSS.

`javascript
import { ssnValidator } from '@omnidyon/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.

$3

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 '@omnidyon/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.

$3

urlValidator checks the given input for a url format.

`javascript
import { urlValidator } from '@omnidyon/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.

$3

zipCodeValidator checks for a valid zip code format.
(format examples: 00000 or 00000-0000)

`javascript
import { zipCodeValidator } from '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
zipCode: [null, [zipCodeValidator()]]
})
}
`

$3

Ngx Validator Pack also includes _multi-stage validation groups_, each providing
a series of checks that activate progressively as the user types.

These are ideal for UI-driven validation feedback such as live checklists below inputs.

Available Check Packs:

| Check Pack | Validates | Notes |
| ------------------- | --------------------------------------- | --------------------------------------------- |
| PasswordChecks | Strength, symbols, numbers, cases | Real–time complexity feedback |
| AddressChecks | Street → City → State → ZIP | Validates single-line US-style address format |
| WordRangeChecks | Min/max word count | Useful for bios/descriptions |
| UsernameChecks | Letters, numbers, underscore rules | No edge or double underscores |
| EmailChecks | Basic RFC-safe email sanity | No < >, spaces, mandatory @ + TLD |
| PhoneChecks | International-friendly digit validation | Allowed chars + digit count 8–15 |
| SlugChecks | URL-safe slug generation | Lowercase, no double or edge dashes |

#### Usage Example:

`typescript
import { PasswordChecks } from '@omnidyon/ngx-validator-pack';

passwordChecks = PasswordChecks();

this.form = this.fb.group({
passwordChecks: [null, this.passwordChecks.validators],
});
`

`html
type="text"
name="passwordChecks"
id="passwordChecks"
formControlName="passwordChecks"
[checks]="passwordChecks.checks"
/>
`

Each pack runs multiple mini–validators and returns a live
boolean matrix you can use to display a progressive checklist to the user.

$3

Ngx Validator Pack exposes checkFactory so you can build custom multi-rule
validators the same way core packs (Password, Slug, Email etc.) are built.

This allows you to define multiple checks such as:

- required patterns (!!)
- forbidden patterns (!)
- custom error messages
- fully indexed UI-friendly validation output

#### Example: Custom Bio Validation

`typescript
import { checkFactory, regexpValidator } from '@omnidyon/ngx-validator-pack';

export const BioChecks = () =>
checkFactory([
{ validator: regexpValidator, args: [/\b\w+\b/, '!!'], errorName: 'hasWords', errorMsg: 'Must contain words.' },
{
validator: regexpValidator,
args: [/(\b\w+\b.*){10,}/, '!!'],
errorName: 'enoughWords',
errorMsg: 'Minimum 10 words required.',
},
{
validator: regexpValidator,
args: [/(https?|www\.)/, '!'],
errorName: 'noLinks',
errorMsg: 'Links are not allowed.',
},
]);
`

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 '@omnidyon/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.

$3

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 '@omnidyon/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
),
],
],
});
}
`

$3

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 '@omnidyon/ngx-validator-pack';

ngOnInit(): void {
this.exampleForm = this.fb.group({
address: [null, [addressValidator(
'address_error_example', // Error name
'Wrong address input!' // Error Message
)]]
})
}
`

$3

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 '@omnidyon/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

type="text"
formControlName="address"
showValidation
/>

`

The result of the code above is:
alt="Picture"
width="auto"
height="300"
style="display: block; margin: 0 auto" />

$3

You can pass an errorStyle object to customize the look of the validation error:

`HTML

type="text"
formControlName="address"
showValidation
[errorStyle]="{
font_size: 'medium',
color: '#ad03fc',
}"
/>

`

The result of the code above is:
alt="Picture"
width="auto"
height="300"
style="display: block; margin: 0 auto" />

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 |

$3

showValidation Directive is PrimeNg compatible:

`HTML

Address
type="text"
formControlName="address"
pInputText
showValidation
[errorStyle]="{
width: '45vw',
color: 'salmon'
}"
/>

``

The result of the code above is:

alt="Picture"
width="auto"
height="150"
style="display: block; margin: 0 auto" />