Need help with ngx-validators?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Nightapes
128 Stars 27 Forks MIT License 171 Commits 3 Opened issues

Description

Validator library for Angular 2+

Services available

!
?

Need anything else?

Contributors list

ngx-validators

npm

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


  
  Password contains repeating characters
  Password should contain at least on digit
  Password should contain at least on alphabetical character
  Password should contain at least on lowercase character
  Password should contain at least on uppercase character


// Override values

Creditcard


  
  Is not a creditcard


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

Email

Normal


  
  Is not a email


Suggest


  
  Maybe check the mail again


Universal

whitespace


  
  Should not contain a whitespace


isNumber


  
  Needs to be a number


isInRange


  
  Needs to be a number
  Number to small
  Number to big


min


  
  Needs to be a number
  Number to small


max


  
  Needs to be a number
  Number to small


Todo

  • Add more password rules
  • Add address validator

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.