CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ngx-validators

Angular form validators for passwords, emails, universal constraints, and credit cards with reactive and template-driven form support

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

universal-validation.mddocs/

Universal Validation

Common data validation rules for whitespace, numeric ranges, string lengths, dates, and data types. These validators work with any form control and data type.

Capabilities

Whitespace Validation

Validates that the control value contains no whitespace characters.

/**
 * Validates that control value contains no whitespace
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if whitespace found, null if valid
 */
static noWhitespace(control: AbstractControl): ValidationErrors | null;

Usage Example:

import { UniversalValidators } from "ngx-validators";
import { FormControl } from "@angular/forms";

const control = new FormControl('', UniversalValidators.noWhitespace);

// Valid: "username", "test123", "no-spaces"
// Invalid: "user name", "test 123", " username"

Error Object:

{ 
  noWhitespaceRequired: true 
}

Empty String Validation

Validates that the control value is not an empty string after trimming whitespace.

/**
 * Validates that control value is not empty after trimming
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if empty, null if valid
 */
static noEmptyString(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', UniversalValidators.noEmptyString);

// Valid: "content", "a", "123"
// Invalid: "", "   ", "\t\n"

Error Object:

{ 
  noEmptyString: true 
}

Number Validation

Validates that the control value is a valid number.

/**
 * Validates that control value is a valid number
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if not a number, null if valid
 */
static isNumber(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', UniversalValidators.isNumber);

// Valid: 123, "456", 78.9, "0.5"
// Invalid: "abc", "12abc", "", null

Error Object:

{ 
  numberRequired: true 
}

Range Validation

Validates that a numeric value falls within a specified range (inclusive).

/**
 * Validates that numeric value is within specified range
 * @param minValue - Minimum allowed value (inclusive)
 * @param maxValue - Maximum allowed value (inclusive)
 * @returns ValidatorFn that validates numeric range
 */
static isInRange(minValue: number, maxValue: number): ValidatorFn;

Usage Example:

// Age must be between 18 and 65
const control = new FormControl('', UniversalValidators.isInRange(18, 65));

// Valid: 18, 25, 65
// Invalid: 17, 66, "abc"

Error Objects:

// Value too small
{ 
  rangeValueToSmall: { 
    requiredMinValue: number, 
    requiredMaxValue: number, 
    actual: any 
  } 
}

// Value too large
{ 
  rangeValueToBig: { 
    requiredMinValue: number, 
    requiredMaxValue: number, 
    actual: any 
  } 
}

// Not a number
{ 
  numberRequired: true 
}

String Length Validation

Minimum Length

Validates that string has at least the specified number of characters.

/**
 * Validates minimum string length
 * @param minLength - Minimum required length
 * @returns ValidatorFn that validates minimum length
 */
static minLength(minLength: number): ValidatorFn;

Usage Example:

// Username must be at least 3 characters
const control = new FormControl('', UniversalValidators.minLength(3));

// Valid: "abc", "username", "test123"
// Invalid: "", "ab", "x"

Error Object:

{ 
  minLength: { 
    requiredMinLength: number, 
    actualLength: number 
  } 
}

Maximum Length

Validates that string does not exceed the specified number of characters.

/**
 * Validates maximum string length
 * @param maxLength - Maximum allowed length
 * @returns ValidatorFn that validates maximum length
 */
static maxLength(maxLength: number): ValidatorFn;

Usage Example:

// Username cannot exceed 20 characters
const control = new FormControl('', UniversalValidators.maxLength(20));

// Valid: "user", "username123", "a" * 20
// Invalid: "a" * 21, "verylongusernamethatexceedslimit"

Error Object:

{ 
  maxLength: { 
    requiredMaxLength: number, 
    actualLength: number 
  } 
}

Numeric Value Validation

Minimum Value

Validates that numeric value meets minimum threshold.

/**
 * Validates minimum numeric value
 * @param min - Minimum allowed value
 * @returns ValidatorFn that validates minimum value
 */
static min(min: number): ValidatorFn;

Usage Example:

// Price must be at least $10
const control = new FormControl('', UniversalValidators.min(10));

// Valid: 10, 15.5, 100
// Invalid: 9, 0, -5

Error Objects:

{ 
  min: { 
    required: number, 
    actual: any 
  } 
}

// If not a number
{ 
  numberRequired: true 
}

Maximum Value

Validates that numeric value does not exceed maximum threshold.

/**
 * Validates maximum numeric value
 * @param max - Maximum allowed value
 * @returns ValidatorFn that validates maximum value
 */
static max(max: number): ValidatorFn;

Usage Example:

// Age cannot exceed 120
const control = new FormControl('', UniversalValidators.max(120));

// Valid: 25, 65, 120
// Invalid: 121, 200, 999

Error Objects:

{ 
  max: { 
    required: number, 
    actual: any 
  } 
}

// If not a number
{ 
  numberRequired: true 
}

Date Validation

Minimum Date

Validates that date value is not before the specified minimum date.

/**
 * Validates minimum date value
 * @param minDate - Minimum allowed date
 * @returns ValidatorFn that validates minimum date
 */
static minDate(minDate: Date): ValidatorFn;

Usage Example:

// Birth date cannot be before 1900
const minBirthDate = new Date('1900-01-01');
const control = new FormControl('', UniversalValidators.minDate(minBirthDate));

// Valid: "1950-06-15", "2000-12-25"
// Invalid: "1899-12-31", "1800-01-01"

Error Objects:

{ 
  minDate: { 
    required: Date, 
    actual: Date 
  } 
}

// If not a valid date
{ 
  dateRequired: true 
}

Maximum Date

Validates that date value is not after the specified maximum date.

/**
 * Validates maximum date value
 * @param minDate - Maximum allowed date (parameter name is misleading but functional)
 * @returns ValidatorFn that validates maximum date
 */
static maxDate(minDate: Date): ValidatorFn;

Usage Example:

// Event date cannot be in the future
const today = new Date();
const control = new FormControl('', UniversalValidators.maxDate(today));

// Valid: yesterday's date, today's date
// Invalid: tomorrow's date, future dates

Error Objects:

{ 
  maxDate: { 
    required: Date, 
    actual: Date 
  } 
}

// If not a valid date
{ 
  dateRequired: true 
}

Type Validation

Validates that the control value matches the specified JavaScript type.

/**
 * Validates that control value matches specified type
 * @param type - Required JavaScript type
 * @returns ValidatorFn that validates data type
 */
static type(type: "number" | "string" | "object" | "boolean"): ValidatorFn;

Usage Example:

// Ensure value is a string
const stringControl = new FormControl('', UniversalValidators.type('string'));

// Ensure value is a number
const numberControl = new FormControl('', UniversalValidators.type('number'));

// Ensure value is a boolean
const booleanControl = new FormControl('', UniversalValidators.type('boolean'));

// Ensure value is an object
const objectControl = new FormControl('', UniversalValidators.type('object'));

Error Object:

{ 
  type: { 
    required: string, 
    actual: string 
  } 
}

Template-Driven Forms Support

For template-driven forms, use the universal validator directives:

<!-- No whitespace validation -->
<input 
  name="username"
  [(ngModel)]="user.username"
  #username="ngModel"
  whiteSpaceValidator>

<!-- Empty string validation -->
<input 
  name="description"
  [(ngModel)]="user.description"
  #description="ngModel"
  emptyStringValidator>

<!-- Number validation -->
<input 
  name="age"
  [(ngModel)]="user.age"
  #age="ngModel"
  isNumberValidator>

<!-- Range validation -->
<input 
  name="score"
  [(ngModel)]="user.score"
  #score="ngModel"
  [isInRangeValidator]="true"
  [minValue]="0"
  [maxValue]="100">

<!-- Min/Max value validation -->
<input 
  name="price"
  [(ngModel)]="product.price"
  #price="ngModel"
  [minValidator]="0.01"
  [maxValidator]="999.99">

<!-- Date validation -->
<input 
  type="date"
  name="birthDate"
  [(ngModel)]="user.birthDate"
  #birthDate="ngModel"
  [minDateValidator]="minBirthDate"
  [maxDateValidator]="maxBirthDate">

<!-- Type validation -->
<input 
  name="value"
  [(ngModel)]="data.value"
  #value="ngModel"
  [typeValidator]="'string'">

Error Display Examples:

<div *ngIf="username.errors?.noWhitespaceRequired">
  Username cannot contain spaces.
</div>

<div *ngIf="age.errors?.numberRequired">
  Please enter a valid number.
</div>

<div *ngIf="score.errors?.rangeValueToSmall">
  Score must be at least {{score.errors.rangeValueToSmall.requiredMinValue}}.
</div>

<div *ngIf="price.errors?.min">
  Price must be at least ${{price.errors.min.required}}.
</div>

docs

credit-card-validation.md

email-validation.md

form-control-utilities.md

index.md

password-validation.md

template-driven-forms.md

universal-validation.md

tile.json