@dynamize/ngx-validator-pack

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
  • 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

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:

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

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:

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

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

laterThenValidator Example:

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

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

compareToValidator Example:

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.

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

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

linkToValidator and linkedToValidator Example:

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.

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

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.

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

Email

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

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.

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

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.

Special Characters

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

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.

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

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

Phone

phoneNumberValidator checks for following formats: [phone], [phone], [phone], [phone], [phone].

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.

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

Social Security Number

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

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.

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

URL

urlValidator checks the given input for a url format.

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.

Zip Code

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

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.

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.

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.

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.

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:

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