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

ngx-validators

Angular form validators library providing comprehensive validation rules for Angular 13+ applications. Supports both reactive forms (model-driven) and template-driven forms through validator functions and directives, with specialized validators for passwords, emails, universal constraints, and credit cards.

Package Information

  • Package Name: ngx-validators
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ngx-validators

Core Imports

import { 
  PasswordValidators, 
  EmailValidators, 
  UniversalValidators, 
  CreditCardValidators,
  EqualToValidator,
  ValidatorsModule 
} from "ngx-validators";

For Angular module setup:

import { ValidatorsModule } from "ngx-validators";

@NgModule({
  imports: [ValidatorsModule],
  // ...
})
export class AppModule {}

Basic Usage

Reactive Forms (Model-Driven)

import { FormBuilder, FormGroup } from "@angular/forms";
import { PasswordValidators, EmailValidators } from "ngx-validators";

export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      email: ['', [EmailValidators.normal]],
      password: ['', [
        PasswordValidators.digitCharacterRule(1),
        PasswordValidators.lowercaseCharacterRule(1),
        PasswordValidators.uppercaseCharacterRule(1)
      ]],
      confirmPassword: [''],
      age: ['', [UniversalValidators.isNumber, UniversalValidators.min(18)]]
    }, {
      validators: [PasswordValidators.mismatchedPasswords('password', 'confirmPassword')]
    });
  }
}

Template-Driven Forms

<form>
  <input 
    name="email" 
    [(ngModel)]="user.email" 
    #email="ngModel"
    emailValidator>
  
  <input 
    name="password" 
    [(ngModel)]="user.password" 
    #password="ngModel"
    [password]="true"
    [digitCharacter]="1"
    [lowercaseCharacter]="1"
    [uppercaseCharacter]="1">
    
  <input 
    name="age" 
    [(ngModel)]="user.age" 
    #age="ngModel"
    isNumber
    [min]="18">
</form>

Architecture

ngx-validators is built around several key components:

  • Validator Classes: Static methods returning Angular ValidatorFn functions for reactive forms
  • Validator Directives: Angular directives implementing the Validator interface for template-driven forms
  • ValidatorsModule: Angular module that declares and exports all validator directives
  • Utility Classes: Helper classes for control manipulation and email suggestions
  • Type Definitions: Complete TypeScript interfaces for configuration options

Capabilities

Password Validation

Comprehensive password strength validation including character requirements, repetition limits, and confirmation matching.

class PasswordValidators {
  static repeatCharacterRegexRule(repeatCount: number): ValidatorFn;
  static alphabeticalCharacterRule(amount: number): ValidatorFn;
  static digitCharacterRule(amount: number): ValidatorFn;
  static lowercaseCharacterRule(amount: number): ValidatorFn;
  static uppercaseCharacterRule(amount: number): ValidatorFn;
  static specialCharacterRule(amount: number): ValidatorFn;
  static allowedCharacterRule(allowedChars: string[]): ValidatorFn;
  static mismatchedPasswords(passwordControlName?: string, confirmPasswordControlName?: string): ValidatorFn;
}

Password Validation

Email Validation

Email validation with HTML5 compliance and intelligent typo suggestion features for common email domains.

class EmailValidators {
  static simple(control: AbstractControl): ValidationErrors | null;
  static normal(control: AbstractControl): ValidationErrors | null;
  static suggest(options?: EmailOptions): ValidatorFn;
}

Email Validation

Universal Validation

Common data validation rules for whitespace, numeric ranges, string lengths, dates, and data types.

class UniversalValidators {
  static noWhitespace(control: AbstractControl): ValidationErrors | null;
  static noEmptyString(control: AbstractControl): ValidationErrors | null;
  static isNumber(control: AbstractControl): ValidationErrors | null;
  static isInRange(minValue: number, maxValue: number): ValidatorFn;
  static minLength(minLength: number): ValidatorFn;
  static maxLength(maxLength: number): ValidatorFn;
  static min(min: number): ValidatorFn;
  static max(max: number): ValidatorFn;
  static minDate(minDate: Date): ValidatorFn;
  static maxDate(minDate: Date): ValidatorFn;
  static type(type: "number" | "string" | "object" | "boolean"): ValidatorFn;
}

Universal Validation

Credit Card Validation

Credit card format validation for major card types including Visa, MasterCard, American Express, and more.

class CreditCardValidators {
  static isCreditCard(control: AbstractControl): ValidationErrors | null;
  static americanExpress(control: AbstractControl): ValidationErrors | null;
  static dinersclub(control: AbstractControl): ValidationErrors | null;
  static discover(control: AbstractControl): ValidationErrors | null;
  static jcb(control: AbstractControl): ValidationErrors | null;
  static maestro(control: AbstractControl): ValidationErrors | null;
  static mastercard(control: AbstractControl): ValidationErrors | null;
  static visa(control: AbstractControl): ValidationErrors | null;
}

Credit Card Validation

Template-Driven Forms Support

Angular directives for using validators in template-driven forms with two-way data binding support.

@NgModule({
  declarations: [/* all validator directives */],
  exports: [/* all validator directives */]
})
export class ValidatorsModule {}

Template-Driven Forms

Form Control Utilities

Utility functions for form control manipulation and validation state management.

class AbstractControlUtil {
  static isNotPresent(control: AbstractControl): boolean;
  static addError(control: AbstractControl | null, errorId: string, value: any): void;
  static removeError(control: AbstractControl | null, errorId: string): void;
}

class EqualToValidator {
  static equalTo(c1Name: string, c2Name: string): ValidatorFn;
}

Form Control Utilities

Email Utility Classes

Complete email processing utilities including suggestion algorithms and email parsing.

interface EmailOptions {
  domains: string[];
  secondLevelDomains: string[];
  topLevelDomains: string[];
}

interface SplittedEmail {
  topLevelDomain: string;
  secondLevelDomain: string;
  domain: string;
  address: string;
}

interface Suggestion {
  address: string;
  domain: string;
  full: string;
}

class EmailSuggestion {
  suggest(email: string, options?: EmailOptions): { [key: string]: Suggestion } | null;
  splitEmail(email: string): SplittedEmail | null;
}

Types

// Angular Forms types (external dependency)
interface AbstractControl {
  value: any;
  errors: ValidationErrors | null;
  // ... other Angular AbstractControl properties
}

interface ValidationErrors {
  [key: string]: any;
}

interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null;
}

// Email validation types
interface EmailOptions {
  domains: string[];
  secondLevelDomains: string[];
  topLevelDomains: string[];
}

interface Suggestion {
  address: string;
  domain: string;
  full: string;
}

interface SplittedEmail {
  topLevelDomain: string;
  secondLevelDomain: string;
  domain: string;
  address: string;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/ngx-validators@6.0.x
Publish Source
CLI
Badge
tessl/npm-ngx-validators badge