@narik/custom-validators
v12.0.0
Published
Framework to create angular application
Downloads
9,038
Maintainers
Readme
Description
Angular Custom Validators, forked from ngx-custom-validators. Directives for form validation (template or model driven).
Installation
npm i @narik/custom-validators
Validators
Angular built-in validators
- maxlength
- minlength
- pattern
- required
Custom validators
- array length
- base64
- credit card
- date
- date ISO
- digits
- 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 NarikCustomValidatorsModule
in app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NarikCustomValidatorsModule } from '@narik/custom-validators';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, FormsModule, NarikCustomValidatorsModule],
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>
<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 '@narik/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)
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 !