@omnidyon/ngx-validator-pack

v1.0.5

Published

18 days ago

An extension pack of Angular form validators.

Downloads

692

Ngx Validator Pack - A pack of validators for Angular Form Group and Form Controls

Installation

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

Reactive Forms Validators

RegExp Validators

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

regexpValidator Example:

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 ?:

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.

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:

import { earlierThenValidator } from '@omnidyon/ngx-validator-pack';

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

laterThenValidator Example:

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

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

compareToValidator Example:

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.

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:

import { requiredWhenValidator } from '@omnidyon/ngx-validator-pack';

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

linkToValidator and linkedToValidator Example:

import { linkToValidator, linkedToValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      linkTo: [null, [linkToValidator("linkedTo")]],
      linkedTo: [null, [linkedToValidator("linkTo")]],
    })
  }

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).

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

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.

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.

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()]]
    })
  }

Email

We can use emailValidator to validate a text input for an email format. (example: [email protected])

import { emailValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      email: [null, [emailValidator()]]
    })
  }

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)

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()]]
    })
  }

Numeric

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

import { numericsOnlyValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      numeric: [null, [numericsOnlyValidator()]]
    })
  }

Special Characters

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

import { noSpecialsValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      noSpecial: [null, [noSpecialsValidator()]]
    })
  }

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)

import { passportValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      passport: [null, [passportValidator()]]
    })
  }

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).

import { passwordValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      password: [null, [passwordValidator()]]
    })
  }

Phone

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

import { phoneNumberValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      phone: [null, [phoneNumberValidator()]]
    })
  }

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.

import { spaceValidator, spaceRestrictionValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      space: [null, [spaceValidator()]],
      spaceRes: [null, [spaceRestrictionValidator()]]
    })
  }

Social Security Number

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

import { ssnValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      ssn: [null, [ssnValidator()]]
    })
  }

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.

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()]]
    })
  }

URL

urlValidator checks the given input for a url format.

import { urlValidator } from '@omnidyon/ngx-validator-pack';

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      url: [null, [urlValidator()]]
    })
  }

Zip Code

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

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

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

Check Packs (Live Progressive Validators)

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:

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

passwordChecks = PasswordChecks();

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

<input
  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.

Creating Your Own Check Pack

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

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.

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.

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.

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
          ),
        ],
      ],
    });
  }

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.

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
      )]]
    })
  }

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.

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:

<form [formGroup]="exampleForm" id="examples-content">
  <input
    type="text"
    formControlName="address"
    showValidation
    />
</form>

The result of the code above is:

Styling

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

<form [formGroup]="exampleForm" id="examples-content">
  <input
    type="text"
    formControlName="address"
    showValidation
    [errorStyle]="{
      font_size: 'medium',
      color: '#ad03fc',
    }"
  />
</form>

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:

<form [formGroup]="exampleForm" id="examples-content">
  <div class="flex flex-column gap-2">
    <label for="address">Address</label>
    <input
      type="text"
      formControlName="address"
      pInputText
      showValidation
      [errorStyle]="{
        width: '45vw',
        color: 'salmon'
      }"
    />
  </div>
</form>

The result of the code above is:

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents

Installation

Reactive 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 (Live Progressive Validators)

Usage Example:

Creating Your Own Check Pack

Example: Custom Bio Validation

Cross Field Validators

Custom Messaging

Custom Messages for Reactive Forms Validators

Custom Messages for Prebuilt Validators

Custom Messages for Cross Field Validator

Showing validation

Styling

PrimeNG Implementation