Description

Angular2 custom validation, inspired by jQuery validation.

Install

npm install ng2-validation --save

Validators

angular2 built-in validators

required
minlength
maxlength
pattern

extend validators

rangeLength
min
max
range
digits
number
url
email
date
dateISO
creditCard
json
base64
phone
uuid
equal
equalTo

Usage

template driven

import FormsModule and CustomFormsModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CustomFormsModule } from 'ng2-validation'

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

@NgModule({
    imports: [BrowserModule, FormsModule, CustomFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

rangeLength

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error message</p>

min

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
<p *ngIf="field.errors?.min">error message</p>

max

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20"/>
<p *ngIf="field.errors?.max">error message</p>

range

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="field.errors?.range">error message</p>

digits

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits/>
<p *ngIf="field.errors?.digits">error message</p>

number

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number/>
<p *ngIf="field.errors?.number">error message</p>

url

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url/>
<p *ngIf="field.errors?.url">error message</p>

email

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" email/>
<p *ngIf="field.errors?.email">error message</p>

date

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date/>
<p *ngIf="field.errors?.date">error message</p>

dateISO

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO/>
<p *ngIf="field.errors?.dateISO">error message</p>

creditCard

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard/>
<p *ngIf="field.errors?.creditCard">error message</p>

json

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json/>
<p *ngIf="field.errors?.json">error message</p>

base64

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64/>
<p *ngIf="field.errors?.base64">error message</p>

phone

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [phone]="'zh-CN'"/>
<p *ngIf="field.errors?.phone">error message</p>

default: en-US

support

zh-CN
zh-TW
en-ZA
en-AU
en-HK
fr-FR
pt-PT
el-GR
en-GB
en-US
en-ZM
ru-RU
nb-NO
nn-NO
vi-VN
en-NZ

uuid

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'"/>
<p *ngIf="field.errors?.uuid">error message</p>

default: all

support

equal

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'"/>
<p *ngIf="field.errors?.equal">error message</p>

equalTo

<input type="password" ngModel name="password" #password="ngModel"/>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
<p *ngIf="certainPassword?.errors?.equalTo">error message</p>

model driven

import ReactiveFormsModule in app.module.ts

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

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

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

import CustomValidators in app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';

@Component({
    selector: 'app',
    template: require('./app.html')
})
export class AppComponent {
    form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            field: new FormControl('', CustomValidators.range([5, 9]))
        });
    }
}

<input type="text" formControlName="field"/>
<p *ngIf="form.controls.field.errors?.rangeLength">error message</p>

examples

CustomValidators.rangeLength([5, 9])

CustomValidators.min(10)

CustomValidators.max(20)

CustomValidators.range([10, 20])

CustomValidators.digits

CustomValidators.number

CustomValidators.url

CustomValidators.email

CustomValidators.date

CustomValidators.dateISO

CustomValidators.creditCard

CustomValidators.json

CustomValidators.base64

CustomValidators.phonoe('zh-CN')

CustomValidators.uuid('3')

CustomValidators.equal('xxx')

var password = new FormControl('', Validators.required);
var certainPassword = new FormControl('', CustomValidators.equalTo(password));

this.form = new FormGroup({
    password: password,
    certainPassword: certainPassword
});

License

MIT

onecib / ng2-validation Goto Github PK

ng2-validation's Introduction