ngx-validators

An implementation of various angular validators for Angular 2+.

List of validators

1. Password
2. Email
3. Universal
4. Creditcards

For validation of phone numbers see: ngx-phone-validators

Install

npm install ngx-validators --save-dev

Angular CLI

No config needed

Angular Seed

Add following to

project.config.ts

let additionalPackages: ExtendPackages[] = [
  {
    name: "ngx-validators",
    path: "node_modules/ngx-validators/bundles/ngx-validators.umd.min.js",
  },
];

this.addPackagesBundles(additionalPackages);

Password validators

The rules are from https://github.com/vt-middleware/passay

The password validators are:

• repeatCharacterRegexRule
• whitespaceRule (moved to UniversalValidators)
• allowedCharacterRule
• alphabeticalCharacterRule
• digitCharacterRule
• lowercaseCharacterRule
• uppercaseCharacterRule
• specialCharacterRule
• more will come

Email validators

• simple (only checks if it looks like a mail)
• normal (follows the HTML5 rules)

Universal validators

• noWhitespace
• noEmptyString
• isNumber
• isInRange
• minLength
• maxLength

Creditcard validators

• americanexpress
• visa
• dinersclub
• discover
• jcb
• maestro
• mastercard

Install

npm install ngx-validators --save

How to use [model driven]

needs:

ReactiveFormsModule

Passwords

import {PasswordValidators} from 'ngx-validators'

...
password: FormControl = new FormControl('', Validators.compose([
    PasswordValidators.repeatCharacterRegexRule(4),
    PasswordValidators.alphabeticalCharacterRule(1),
    PasswordValidators.digitCharacterRule(1),
    PasswordValidators.lowercaseCharacterRule(1),
    PasswordValidators.uppercaseCharacterRule(1),
    PasswordValidators.specialCharacterRule(1),
    PasswordValidators.allowedCharacterRule(['a', 'b'])
    ]));

Password mismatch

import {PasswordValidators} from 'ngx-validators'

...
let password: FormControl = new FormControl('testPassword');
let confirmPassword: FormControl = new FormControl('testPassword');
let form = new FormGroup({
    'newPassword': password,
    'confirmPassword': confirmPassword
}, PasswordValidators.mismatchedPasswords()
);

Override control name

import {PasswordValidators} from 'ngx-validators'

...
let password: FormControl = new FormControl('testPassword');
let confirmPassword: FormControl = new FormControl('testPassword');
let form = new FormGroup({
    'testName': password,
    'testName2': confirmPassword
}, PasswordValidators.mismatchedPasswords('testName', 'testName2' )
);

Email

import {EmailValidators} from 'ngx-validators'

...
email: FormControl = new FormControl('', EmailValidators.normal);
email2: FormControl = new FormControl('', EmailValidators.simple);
email3: FormControl = new FormControl('', EmailValidators.suggest);

Universal

import {UniversalValidators} from 'ngx-validators'

...
control: FormControl = new FormControl('', UniversalValidators.noWhitespace);
control: FormControl = new FormControl('', UniversalValidators.isNumber);
control: FormControl = new FormControl('', UniversalValidators.isInRange(2, 5));
control: FormControl = new FormControl('', UniversalValidators.minLength(2));
control: FormControl = new FormControl('', UniversalValidators.maxLength(7));
control: FormControl = new FormControl('', UniversalValidators.min(2));
control: FormControl = new FormControl('', UniversalValidators.max(2));

Creditcards

import {CreditCardValidators} from 'ngx-validators'

...
control: FormControl = new FormControl('', UniversalValidators.isCreditCard);
control: FormControl = new FormControl('', UniversalValidators.americanExpress);
control: FormControl = new FormControl('', UniversalValidators.dinersclub);
control: FormControl = new FormControl('', UniversalValidators.discover);
control: FormControl = new FormControl('', UniversalValidators.jcb);
control: FormControl = new FormControl('', UniversalValidators.maestro);
control: FormControl = new FormControl('', UniversalValidators.mastercard);
control: FormControl = new FormControl('', UniversalValidators.visa);

How to use [template driven]

needs

FormsModule and ValidatorsModule

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { ValidatorsModule } from "ngx-validators";

import { AppComponent } from "./app.component";
@NgModule({
  imports: [BrowserModule, FormsModule, ValidatorsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Password

// Override values

Creditcard

// Override values // Test only for a specific creditcard

Email

Normal

Suggest

Universal

whitespace

isNumber

isInRange

min

max

Todo

• Add more password rules
• Add address validator

Get the complete changelog here: https://github.com/Nightapes/ngx-validators/releases