@dynamize/ngx-validator-pack

v1.0.1

Published

2 months ago

An extension pack of Angular form validators.

Downloads

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

Installation

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

Ngx Validators

RegExp Validators

There are two types of RegExp validators in the Validator Pack, regexpValidator and regexpNotValidator.

regexpValidator returns an error if the value does not match the regular expression, and opposite to it regexpNotValidator returns an error if the value matches the regular expression.

regexpValidator Example:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  constructor(private readonly fb: FormBuilder) { }

  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.

regexpNotValidator Example:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  constructor(private readonly fb: FormBuilder) { }

  ngOnInit(): void {
    this.exampleForm = this.fb.group({
      regexpNotInput: [null, [regexpNotValidator(/(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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  constructor(private readonly fb: FormBuilder) { }

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

laterThenValidator Example:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  constructor(private readonly fb: FormBuilder) { }

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

compareToValidator Example:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  constructor(private readonly fb: FormBuilder) { }

  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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

linkToValidator and linkedToValidator Example:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

Ngx 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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

  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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

  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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

  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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

Space

singleSpaceValidator will return an error if an input consists of a single space charter.

spaceRestrictionValidator will return an error if a given input starts or ends with a space charter.

import { singleSpaceValidator, spaceRestrictionValidator } from '@dynamize/ngx-validator-pack';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

Social Security Number

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

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

Ngx Form Group 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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

  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 Ngx Validators

All ngx 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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  exampleForm!: FormGroup;
  constructor(private readonly fb: FormBuilder) {}

  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 Ngx Prebuilt Validators

Custom error messages are also available for ngx 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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

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

Custom Messages for Ngx Form Group Validator

Ngx From Group 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';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit{
  exampleForm!: FormGroup;
  randomBool = (): boolean => Math.random() >= 0.5;

  constructor(private readonly fb: FormBuilder) { }

  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"
    name="address"
    id="address"
    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"
    name="address"
    id="address"
    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"
      name="address"
      id="address"
      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

Ngx Validators

RegExp Validators

Date Validators

Conditional Validators

Ngx Prebuilt Validators

Address

Alphabet

Date

Email

IP Address

Numeric

Special Characters

Passport

Password

Phone

Space

Social Security Number

Time

URL

Zip Code

Ngx Form Group Validators

Custom Messaging

Custom Messages for Ngx Validators

Custom Messages for Ngx Prebuilt Validators

Custom Messages for Ngx Form Group Validator

Showing validation

Styling

PrimeNG Implementation