Angular2 custom validation, inspired by jQuery validation.
npm install ng2-validation --save- required
- minlength
- maxlength
- pattern
- rangeLength
- min
- gt
- max
- lt
- range
- digits
- number
- url
- date
- minDate
- maxDate
- dateISO
- creditCard
- json
- base64
- phone
- uuid
- equal
- equalTo
- notEqualTo
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 {
}<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error message</p><input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
<p *ngIf="field.errors?.min">error message</p><input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10"/>
<p *ngIf="field.errors?.gt">error message</p><input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20"/>
<p *ngIf="field.errors?.max">error message</p><input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20"/>
<p *ngIf="field.errors?.lt">error message</p><input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="field.errors?.range">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits/>
<p *ngIf="field.errors?.digits">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number/>
<p *ngIf="field.errors?.number">error message</p><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" email/>
<p *ngIf="field.errors?.email">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date/>
<p *ngIf="field.errors?.date">error message</p><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" maxDate="2016-09-09"/>
<p *ngIf="field.errors?.maxDate">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO/>
<p *ngIf="field.errors?.dateISO">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard/>
<p *ngIf="field.errors?.creditCard">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json/>
<p *ngIf="field.errors?.json">error message</p><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64/>
<p *ngIf="field.errors?.base64">error message</p><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
- de-CH
- de-DE
- el-GR
- en-AU
- en-GB
- en-HK
- en-NZ
- en-US
- en-ZA
- en-ZM
- fr-FR
- hu-HU
- nb-NO
- nl-NL
- nn-NO
- pt-BR
- pt-PT
- ru-RU
- vi-VN
- zh-CN
- zh-TW
<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
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'"/>
<p *ngIf="field.errors?.equal">error message</p><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><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>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="demoForm.from.controls.field.errors?.rangeLength">error message</p>new FormControl('', CustomValidators.rangeLength([5, 9]))new FormControl('', CustomValidators.min(10))new FormControl('', CustomValidators.gt(10))new FormControl('', CustomValidators.max(20))new FormControl('', CustomValidators.lt(20))new FormControl('', CustomValidators.range([10, 20]))new FormControl('', CustomValidators.digits)new FormControl('', CustomValidators.number)new FormControl('', CustomValidators.url)new FormControl('', CustomValidators.email)new FormControl('', CustomValidators.date)new FormControl('', CustomValidators.minDate('2016-09-09'))new FormControl('', CustomValidators.maxDate('2016-09-09'))new FormControl('', CustomValidators.dateISO)new FormControl('', CustomValidators.creditCard)new FormControl('', CustomValidators.json)new FormControl('', CustomValidators.base64)new FormControl('', CustomValidators.phone('zh-CN'))new FormControl('', CustomValidators.uuid('3'))new FormControl('', CustomValidators.equal('xxx'))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>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>MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent