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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Credit Card Validation

Name: tessl/npm-ngx-validators
Author: tessl

Credit card format validation for major card types including Visa, MasterCard, American Express, Discover, JCB, Maestro, and Diners Club using industry-standard regex patterns.

Capabilities

Generic Credit Card Validation

Validates that the input matches any of the supported credit card formats.

/**
 * Validates any supported credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static isCreditCard(control: AbstractControl): ValidationErrors | null;

Usage Example:

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

const control = new FormControl('', CreditCardValidators.isCreditCard);

// Valid: "4111111111111111" (Visa), "5555555555554444" (MasterCard)
// Invalid: "1234567890123456", "invalid-card-number"

Supported Card Types: Visa, MasterCard, American Express, Discover, JCB, Maestro, Diners Club

Error Object:

{ 
  creditcard: true 
}

Visa Card Validation

Validates Visa card format (starts with 4, 13 or 16 digits).

/**
 * Validates Visa credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static visa(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.visa);

// Valid: "4111111111111111", "4000000000000002"
// Invalid: "5555555555554444" (MasterCard), "invalid"

Pattern: ^(?:4[0-9]{12})(?:[0-9]{3})?$

Error Object:

{ 
  visa: true 
}

MasterCard Validation

Validates MasterCard format (starts with 5[1-5] or 2[2-7], 16 digits).

/**
 * Validates MasterCard credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static mastercard(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.mastercard);

// Valid: "5555555555554444", "2223000048400011"
// Invalid: "4111111111111111" (Visa), "invalid"

Pattern: ^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$

Error Object:

{ 
  mastercard: true 
}

American Express Validation

Validates American Express format (starts with 34 or 37, 15 digits).

/**
 * Validates American Express credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static americanExpress(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.americanExpress);

// Valid: "378282246310005", "371449635398431"
// Invalid: "4111111111111111" (Visa), "invalid"

Pattern: ^(?:3[47][0-9]{13})$

Error Object:

{ 
  americanExpress: true 
}

Discover Card Validation

Validates Discover card format (starts with 6011 or 65, 16 digits).

/**
 * Validates Discover credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static discover(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.discover);

// Valid: "6011111111111117", "6500000000000002"
// Invalid: "4111111111111111" (Visa), "invalid"

Pattern: ^(?:6(?:011|5[0-9]{2})(?:[0-9]{12}))$

Error Object:

{ 
  discover: true 
}

JCB Card Validation

Validates JCB card format (starts with 2131, 1800, or 35, variable length).

/**
 * Validates JCB credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static jcb(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.jcb);

// Valid: "3530111333300000", "213100000000000"
// Invalid: "4111111111111111" (Visa), "invalid"

Pattern: ^(?:(?:2131|1800|35\\d{3})\\d{11})$

Error Object:

{ 
  jcb: true 
}

Maestro Card Validation

Validates Maestro card format (starts with 50-69, variable length 12-19 digits).

/**
 * Validates Maestro credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static maestro(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.maestro);

// Valid: "6304000000000000", "5018000000000009"
// Invalid: "4111111111111111" (Visa), "invalid"

Pattern: ^(?:(?:5[0678]\\d\\d|6304|6390|67\\d\\d)\\d{8,15})$

Error Object:

{ 
  maestro: true 
}

Diners Club Validation

Validates Diners Club card format (starts with 30[0-5] or 3[68], 14 digits).

/**
 * Validates Diners Club credit card format
 * @param control - AbstractControl to validate
 * @returns ValidationErrors if invalid, null if valid
 */
static dinersclub(control: AbstractControl): ValidationErrors | null;

Usage Example:

const control = new FormControl('', CreditCardValidators.dinersclub);

// Valid: "30569309025904", "38520000023237"
// Invalid: "4111111111111111" (Visa), "invalid"

Pattern: ^(?:3(?:0[0-5]|[68][0-9])[0-9]{11})$

Error Object:

{ 
  dinersclub: true 
}

Usage Examples

Reactive Forms

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

export class PaymentComponent {
  paymentForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      // Accept any valid credit card
      cardNumber: ['', [CreditCardValidators.isCreditCard]],
      
      // Require specific card type
      visaCard: ['', [CreditCardValidators.visa]],
      mastercardOnly: ['', [CreditCardValidators.mastercard]],
      amexOnly: ['', [CreditCardValidators.americanExpress]]
    });
  }
  
  // Check specific card type
  getCardType(cardNumber: string): string {
    if (CreditCardValidators.visa({ value: cardNumber } as AbstractControl) === null) {
      return 'Visa';
    }
    if (CreditCardValidators.mastercard({ value: cardNumber } as AbstractControl) === null) {
      return 'MasterCard';
    }
    if (CreditCardValidators.americanExpress({ value: cardNumber } as AbstractControl) === null) {
      return 'American Express';
    }
    return 'Unknown';
  }
}

Template-Driven Forms

<form>
  <!-- Generic credit card validation -->
  <input 
    type="text"
    name="cardNumber"
    [(ngModel)]="payment.cardNumber"
    #cardNumber="ngModel"
    creditCardValidator
    placeholder="Enter credit card number">
  
  <div *ngIf="cardNumber.errors?.creditcard">
    Please enter a valid credit card number.
  </div>

  <!-- Specific card type validation -->
  <input 
    type="text"
    name="visaCard"
    [(ngModel)]="payment.visaCard"
    #visaCard="ngModel"
    visaValidator
    placeholder="Visa card only">
  
  <div *ngIf="visaCard.errors?.visa">
    Please enter a valid Visa card number.
  </div>
</form>

Card Type Detection

import { CreditCardValidators } from "ngx-validators";

class CardTypeDetector {
  detectCardType(cardNumber: string): string[] {
    const types: string[] = [];
    const control = { value: cardNumber } as AbstractControl;
    
    if (CreditCardValidators.visa(control) === null) types.push('Visa');
    if (CreditCardValidators.mastercard(control) === null) types.push('MasterCard');
    if (CreditCardValidators.americanExpress(control) === null) types.push('American Express');
    if (CreditCardValidators.discover(control) === null) types.push('Discover');
    if (CreditCardValidators.jcb(control) === null) types.push('JCB');
    if (CreditCardValidators.maestro(control) === null) types.push('Maestro');
    if (CreditCardValidators.dinersclub(control) === null) types.push('Diners Club');
    
    return types;
  }
}

Template-Driven Forms Support

For template-driven forms, use the CreditCardValidatorDirective:

<input 
  type="text"
  name="creditCard"
  [(ngModel)]="user.creditCard"
  #creditCard="ngModel"
  creditCardValidator>

<div *ngIf="creditCard.errors?.creditcard">
  Please enter a valid credit card number.
</div>

Important Notes

Format Only: These validators only check the format/pattern of credit card numbers, not whether they are actual valid, active cards.
No Luhn Algorithm: The validators do not implement the Luhn algorithm checksum validation.
Number Input: Card numbers should be provided as strings of digits without spaces, dashes, or other formatting.
Test Card Numbers: Use official test card numbers for development:
- Visa: 4111111111111111, 4000000000000002
- MasterCard: 5555555555554444, 2223000048400011
- American Express: 378282246310005, 371449635398431
Security: Never store or log actual credit card numbers. Always use secure payment processing services.