Skip to content

briankoech/angular2-validators

 
 

Repository files navigation

NOTE Still in development

npm version

Ng2 Validators

A List of validators for Angular 2 Forms based on validator.js

Usage

Install

$ npm install --save angular2-validators

Use as Model Based Validators

import { Component } from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { isEmail } from 'angular2-validators';

@Component({
  selector: 'app-root',
  template: `
      <form [formGroup]="theForm" novalidate>
          <label for="name">Name</label>
          <input type="text" class="form-control" formControlName="name">
      </form>
  `,
})
export class AppComponent {
  theForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.theForm = fb.group({
      name: ['', [Validators.required, isEmail]]
    });
  }
}

Use as Directive Validator

We need to import angular2-validators as a module in app.module.ts file, or equivalent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { Ng2ValidatorsModule } from 'angular2-validators';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    Ng2ValidatorsModule // Add angular2-validators module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then you can just use it in your template as a directive

<input type="text" class="form-control" formControlName="name" isEmail>

Contributing

This module is still in development and PRs are so welcome to the develop branch

Added Validators

  • contains
  • equals
  • isAfter,
  • isAlpha,
  • isAlphanumeric,
  • isAscii,
  • isBase64,
  • isBefore,
  • isBoolean,
  • isByteLength,
  • isCreditCard,
  • isCurrency,
  • isDataUri,
  • isDate,
  • isDecimal,
  • isDivisibleBy,
  • isEmail,
  • isFloat,
  • isFQDN,
  • isFullWidth,
  • isHalf,
  • isHexColor,
  • isHexaDecimal,
  • isInt,
  • isIP,
  • isISBN,
  • isISIN,
  • isISO6601,
  • isJSON,
  • isLength,
  • isLowerCase,
  • isMacAddress,
  • isMd5,
  • isMobilePhone,
  • isMongoId,
  • isMultibyte,
  • isNull,
  • isNumeric,
  • isSurrogatePair,
  • isUpperCase,
  • isURL,
  • isUUID,
  • isVariableWidth,
  • isWhiteListed

About

Angular 2 Form Validators based on ValidatorJS

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 89.4%
  • JavaScript 5.2%
  • HTML 5.2%
  • CSS 0.2%