npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng2-validators

v2.2.0

Published

An implementation of angular validators for Angular 2

Downloads

241

Readme

ng2-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

Install

npm install ng2-validators --save-dev

Angular CLI

No config needed

Angular Seed

Add following to project.config.ts

let additionalPackages: ExtendPackages[] = [
      {
        name: 'google-libphonenumber',
        path: 'node_modules/google-libphonenumber/dist/libphonenumber.js'
      },
      {
        name: 'ng2-validators',
        path: 'node_modules/ng2-validators/bundles/ng2-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
  • noEmtpyString
  • isNumber
  • isInRange
  • minLength
  • maxLength

Creditcard validators

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

Install

npm install ng2-validators --save

How to use [model driven]

needs: ReactiveFormsModule

Passwords

import {PasswordValidators} from 'ng2-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 'ng2-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 'ng2-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 'ng2-validators'

...

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

Universal

import {UniversalValidators} from 'ng2-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 'ng2-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);

Phonenumber

import {PhoneValidators} from 'ng2-validators'

...

countryCode: FormControl = new FormControl('', PhoneValidators.isValidRegionCode);
phone: FormControl = new FormControl('', PhoneValidators.isPhoneNumber('US'));
phone2: FormControl = new FormControl('', PhoneValidators.isPossibleNumberWithReason('US'));

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 'ng2-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>

Phone

Valid Phone

<form>
<input type="text" [(ngModel)]="model.phone" name="phone" #formControl="ngModel" phone="US">
<span *ngIf="formControl.hasError('noValidRegionCode')">Is not a countryCode</span>
<span *ngIf="formControl.hasError('noPhoneNumber')">Is not a phone number</span>
</form>

Possible Phone

<form>
<input type="text" [(ngModel)]="model.phone" name="phone" #formControl="ngModel" possiblePhone="US">
<span *ngIf="formControl.hasError('noValidRegionCode')">Is not a countryCode</span>
<span *ngIf="formControl.hasError('phoneNumberTooLong')">Phone number is to long</span>
<span *ngIf="formControl.hasError('phoneNumberTooShort')">Phone number is to short</span>
<span *ngIf="formControl.hasError('noPhoneNumber')">Is not a phone number</span>
</form>

CountryCode

<form>
<input type="text" [(ngModel)]="model.countryCode" name="countryCode" #formControl="ngModel" countryCode>
<span *ngIf="formControl.hasError('noValidRegionCode')">Is not a countryCode</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

  • Implement https://github.com/mailcheck/mailcheck
  • Add more password rules
  • Add address validator

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