Description

Angular Custom Validators, forked from ng2-validation. Directives for form validation (template or model driven).

Installation

npm i ngx-custom-validators --save

Validators

Angular built-in validators

maxlength
minlength
pattern
required

Custom validators

array length
base64
credit card
date
date ISO
digits
email
equal
included in
not included in
not equal
equal to
not equal to
greater than
greater than or equal
json
less than
less than or equal
max
max date
min
min date
not equal
not equal to
number
property
range
range length
url
uuid

Usage

The paramater of each validator (if it has) can be accessible in the template with reason.

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
<!-- Will display : error message and must be greater than 10 -->
<p *ngIf="field.errors?.gt">error message and must be greater than {{ field.errors?.reason }}</p>

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 'ngx-custom-validators';

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

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

range length - 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>

greater than - gt

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

greater than or equal - gte

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

max

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

less than - lt

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

less than or equal - lte

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lte]="20">
<p *ngIf="field.errors?.lte">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" ngvemail>
<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>

min date - minDate

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

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

max date - maxDate

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

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

date ISO - dateISO

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

credit card - 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>

uuid

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

default: all

support

3
4
5
all

equal

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

not equal - notEqual

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

equal to - equalTo

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

not equal to - notEqualTo

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

property

public obj = { id: 1 } // OK
public obj = { name: 'baguette' } // KO

<input type="text" ngModel name="obj" #obj="ngModel" property="id">
<!-- For multiple properties check -->
<input type="text" ngModel name="obj" #obj="ngModel" property="id,value,name">
<p *ngIf="obj.errors?.property">property error</p>

array length - ArrayLength

public arr = [{ name: 'baguette' }, { name: 'croisant' }] // OK
public arr = [{ name: 'baguette' }] // KO

<input type="text" ngModel name="arr" #arr="ngModel" arrayLength="2">
<p *ngIf="arr.errors?.arrayLength">arrayLength error</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 'ngx-custom-validators';

@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="demoForm.from.controls.field.errors?.rangeLength">error message</p>

range length - rangeLenght

new FormControl('', CustomValidators.rangeLength([5, 9]))

min

new FormControl('', CustomValidators.min(10))

greater than - gt

new FormControl('', CustomValidators.gt(10))

max

new FormControl('', CustomValidators.max(20))

less than - lt

new FormControl('', CustomValidators.lt(20))

range

new FormControl('', CustomValidators.range([10, 20]))

digits

new FormControl('', CustomValidators.digits)

number

new FormControl('', CustomValidators.number)

url

new FormControl('', CustomValidators.url)

email

new FormControl('', CustomValidators.email)

date

new FormControl('', CustomValidators.date)

min date - minDate

new FormControl('', CustomValidators.minDate('2016-09-09'))

max date - maxDate

new FormControl('', CustomValidators.maxDate('2016-09-09'))

date ISO - dateISO

new FormControl('', CustomValidators.dateISO)

credit card - creditCard

new FormControl('', CustomValidators.creditCard)

json

new FormControl('', CustomValidators.json)

base64

new FormControl('', CustomValidators.base64)

uuid

new FormControl('', CustomValidators.uuid('3'))

equal

new FormControl('', CustomValidators.equal('xxx'))

not equal - notEqual

new FormControl('', CustomValidators.notEqual('xxx'))

equal to - equalTo

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

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

<form [formGroup]="form">
  <input type="password" formControlName="password">
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword">
  <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p>
</form>

not equal to - notEqualTo

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));

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

<form [formGroup]="form">
  <input type="password" formControlName="password">
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword">
  <p *ngIf="form.controls.certainPassword.errors?.notEqualTo">notEqualTo error</p>
</form>

property

public obj = { id: 1 };

this.form = new FormGroup({
  obj: new FormControl('', CustomValidators.property('id'))
  // For multiple properties check
  obj: new FormControl('', CustomValidators.property('id,value,name'))
});

<form [formGroup]="form">
  <input type="text" formControlName="obj">
  <p *ngIf="form.controls.obj.errors?.property">property error</p>
</form>

array length - ArrayLength

public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
  arr: new FormControl('', CustomValidators.arrayLength(2))
});

<form [formGroup]="form">
  <input type="text" formControlName="arr">
  <p *ngIf="arr.errors?.arrayLength">arrayLength error</p>
</form>

included in array - includedIn

public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
  arr: new FormControl('bread', CustomValidators.includedIn(arr))
});

<form [formGroup]="form">
  <input type="text" formControlName="arr">
  <p *ngIf="arr.errors?.includedIn">includedIn error</p>
</form>

not included in array - notIncludedIn

public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
  arr: new FormControl('baguette', CustomValidators.notIncludedIn(arr))
});

<form [formGroup]="form">
  <input type="text" formControlName="arr">
  <p *ngIf="arr.errors?.notIncludedIn">notIncludedIn error</p>
</form>

not matching a regular expression - notMatching (negate pattern)

public pattern = /a+bc/
this.form = new FormGroup({
  p: new FormControl('aabc', CustomValidators.notIncludedIn(pattern))
});

<form [formGroup]="form">
  <input type="text" formControlName="p">
  <p *ngIf="arr.errors?.notMatching">notMatching error</p>
</form>

For developpers

To run the projet : npm start Don't forget to run npm test and npm lint before each pull request. Thanks !

rsaenen/ngx-custom-validators

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages