Skip to content

Nightapes/ngx-validators

Folders and files

NameName
Last commit message
Last commit date

Latest commit

52253f5 · Nov 12, 2021
Nov 12, 2021
Apr 20, 2020
Sep 9, 2021
Nov 12, 2021
Nov 12, 2021
Nov 12, 2021
Nov 12, 2021
Mar 26, 2017
Apr 20, 2020
Apr 20, 2020
Nov 12, 2021
May 10, 2016
Nov 12, 2021
Nov 12, 2021
Nov 12, 2021
Nov 12, 2021
Nov 12, 2021

Repository files navigation

ngx-validators

An implementation of various angular validators for Angular 13+.

For Angular < 12.x.x use version v5.4.0

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

No config needed

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

<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

Normal

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

Suggest

<form>
  <input type="text" [(ngModel)]="model.email" name="email" #formControl="ngModel" emailSuggest />
  <span *ngIf="formControl.hasError('suggestion')">Maybe check the mail again</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>

type

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

##Todo

  • Add more password rules
  • Add address validator

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