Validator library for Angular 2+
Branch: master
Clone or download
Nightapes Merge pull request #62 from Nightapes/Nightapes-patch-1
build(travis): move build out of after_success
Latest commit 11fcbd9 Feb 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode feat(tooling): update tool chain Mar 14, 2018
examples feat(angular): update dependency to angular 7 Oct 24, 2018
src feat(util): expose AbstractControlUtil Sep 11, 2018
.editorconfig
.gitignore build(gitignore): add dist and coverage Mar 14, 2018
.npmignore feat(angular): support for angular 4.0.0 and higher Mar 26, 2017
.travis.yml build(travis): move build out of after_success Feb 18, 2019
LICENSE
README.md feat(phone): extract phone validators to extra lib May 28, 2018
karma.conf.js build(karma): fix travis build Mar 20, 2018
package.json
tsconfig.json build(tooling): switch to yarn Mar 14, 2018
tslint.json feat(util): expose AbstractControlUtil Sep 11, 2018
yarn.lock feat(angular): update dependency to angular 7 Oct 24, 2018

README.md

ngx-validators

Build Status npm npm-dev

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

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

<form>
<input type="password" [(ngModel)]="model.password" name="password" #formControl="ngModel" password>
<span *ngIf="formControl.hasError('repeatCharacterRegexRule')">Password contains repeating characters</span>
<span *ngIf="formControl.hasError('digitCharacterRule')">Password should contain at least on digit</span>
<span *ngIf="formControl.hasError('alphabeticalCharacterRule')">Password should contain at least on alphabetical character</span>
<span *ngIf="formControl.hasError('lowercaseCharacterRule')">Password should contain at least on lowercase character</span>
<span *ngIf="formControl.hasError('uppercaseCharacterRule')">Password should contain at least on uppercase character</span>
</form>

// Override values
<input type="password" [(ngModel)]="model.password" name="password" #formControl="ngModel"
    password
    [repeatCharacter]="2"
    [alphabeticalCharacter]="2"
    [digitCharacter]="2"
    [lowercaseCharacter]="2"
    [uppercaseCharacter]="2"
>

Creditcard

<form>

<input type="text" [(ngModel)]="model.creditcard" name="creditcard" #formControl="ngModel" creditCard>
<span *ngIf="formControl.hasError('creditcard')">Is not a creditcard</span>
</form>

// Override values
// Test only for a specific creditcard
<input type="text" [(ngModel)]="model.creditcard" name="creditcard" #formControl="ngModel" [creditCard]="all|americanExpress|dinersclub|discover|jcb|maestro|mastercard|visa">

Email

<form>
<input type="text" [(ngModel)]="model.email" name="email" #formControl="ngModel" email>
<span *ngIf="formControl.hasError('normalEmailRule')">Is not a email</span>
</form>

Universal

whitespace

<form>
<input type="text" [(ngModel)]="model.firstname" name="firstname" #formControl="ngModel" noWhitespace>
<span *ngIf="formControl.hasError('noWhitespaceRequired')">Should not contain a whitespace</span>
</form>

isNumber

<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" isNumber>
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
</form>

isInRange

<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" isInRange  [minValue]="2" [maxValue]="4">
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
<span *ngIf="formControl.hasError('rangeValueToSmall')">Number to small</span>
<span *ngIf="formControl.hasError('rangeValueToBig')">Number to big</span>
</form>

min

<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" [min]="2">
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
<span *ngIf="formControl.hasError('min')">Number to small</span>
</form>

max

<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" [max]="2">
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
<span *ngIf="formControl.hasError('max')">Number to small</span>
</form>

##Todo

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