yuyang041060120 / Ng2 Validation
Licence: mit
angular2 validation
Stars: β 622
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Ng2 Validation
ng2-multi-step-wizard-ui-router1
Series 3: Tutorials on creating an Angular 2 Multi-Step Wizard using UI-Router 1.0 and TypeScript 2.0.10
Stars: β 33 (-94.69%)
Mutual labels: validation, angular2
Vvalidator
π€ An easy to use form validator for Kotlin & Android.
Stars: β 592 (-4.82%)
Mutual labels: validation
Angular Commerce
Angular components for scaffolding online store
Stars: β 526 (-15.43%)
Mutual labels: angular2
Swiftcop
SwiftCop is a validation library fully written in Swift and inspired by the clarity of Ruby On Rails Active Record validations.
Stars: β 544 (-12.54%)
Mutual labels: validation
Angular2 Mdl
Angular 2, 4, 5, 6, 7, 8, 9, 10, 11 components, directives and styles based on material design lite (npm: @angular-mdl/core)
Stars: β 562 (-9.65%)
Mutual labels: angular2
Store Receipt Validator
PHP receipt validator for Apple iTunes, Google Play and Amazon App Store
Stars: β 547 (-12.06%)
Mutual labels: validation
Superstruct
A simple and composable way to validate data in JavaScript (and TypeScript).
Stars: β 5,604 (+800.96%)
Mutual labels: validation
Angular2 Express Starter
Angular 8 and Express πͺ ( Heroku ready )
Stars: β 565 (-9.16%)
Mutual labels: angular2
Ion2 Calendar
π
A date picker components for ionic2 οΌionic3 / ionic4
Stars: β 537 (-13.67%)
Mutual labels: angular2
Angular Springboot Rest Jwt
Springboot, Angular and JWT security - Example Project based on Northwind Order Processing
Stars: β 603 (-3.05%)
Mutual labels: angular2
Ngx Admin
Customizable admin dashboard template based on Angular 10+
Stars: β 23,286 (+3643.73%)
Mutual labels: angular2
Firely Net Sdk
The official Firely .NET SDK for HL7 FHIR
Stars: β 560 (-9.97%)
Mutual labels: validation
Deprecated, you can fork and publish yours.
Description
Angular2 custom validation, inspired by jQuery validation.
Install
npm install ng2-validation --save
Systemjs
'ng2-validation': 'npm:ng2-validation/bundles/ng2-validation.umd.js'
Validators
angular2 built-in validators
- required
- minlength
- maxlength
- pattern
custom validators
- rangeLength
- min
- gt
- gte
- max
- lt
- lte
- range
- digits
- number
- url
- date
- minDate
- maxDate
- dateISO
- creditCard
- json
- base64
- phone
- uuid
- equal
- notEqual
- equalTo
- notEqualTo
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>
gt
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10"/>
<p *ngIf="field.errors?.gt">error message</p>
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>
lt
<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20"/>
<p *ngIf="field.errors?.lt">error message</p>
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" 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>
minDate
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" minDate="2016-09-09"/>
<p *ngIf="field.errors?.minDate">error message</p>
maxDate
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" maxDate="2016-09-09"/>
<p *ngIf="field.errors?.maxDate">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="CN"/>
<p *ngIf="field.errors?.phone">error message</p>
details see libphonenumber
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>
equal
<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [notEqual]="'xxx'"/>
<p *ngIf="field.errors?.notEqual">error message</p>
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>
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>
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="demoForm.from.controls.field.errors?.rangeLength">error message</p>
rangeLength
new FormControl('', CustomValidators.rangeLength([5, 9]))
min
new FormControl('', CustomValidators.min(10))
gt
new FormControl('', CustomValidators.gt(10))
max
new FormControl('', CustomValidators.max(20))
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)
minDate
new FormControl('', CustomValidators.minDate('2016-09-09'))
maxDate
new FormControl('', CustomValidators.maxDate('2016-09-09'))
dateISO
new FormControl('', CustomValidators.dateISO)
creditCard
new FormControl('', CustomValidators.creditCard)
json
new FormControl('', CustomValidators.json)
base64
new FormControl('', CustomValidators.base64)
phone
new FormControl('', CustomValidators.phone('zh-CN'))
uuid
new FormControl('', CustomValidators.uuid('3'))
equal
new FormControl('', CustomValidators.equal('xxx'))
notEqual
new FormControl('', CustomValidators.notEqual('xxx'))
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>
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>
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].