Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuyang041060120/angular2-validate
angular2 validation
https://github.com/yuyang041060120/angular2-validate
angular2 validation
Last synced: 4 months ago
JSON representation
angular2 validation
- Host: GitHub
- URL: https://github.com/yuyang041060120/angular2-validate
- Owner: yuyang041060120
- License: mit
- Created: 2016-07-14T10:31:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-10T20:32:48.000Z (about 1 year ago)
- Last Synced: 2024-05-22T04:31:31.186Z (7 months ago)
- Topics: angular2, validation
- Language: TypeScript
- Homepage: https://yuyang041060120.github.io/ng2-validation/index.html
- Size: 3.82 MB
- Stars: 610
- Watchers: 30
- Forks: 211
- Open Issues: 78
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-validation - Angular2 validation. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-validation - Angular2 validation. (Uncategorized / Uncategorized)
README
> Deprecated, you can fork and publish yours.
# Description
Angular2 custom validation, inspired by jQuery validation.
# Install
```bash
npm install ng2-validation --save
```
# Systemjs
```bash
'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
- email
- date
- minDate
- maxDate
- dateISO
- creditCard
- json
- base64
- phone
- uuid
- equal
- notEqual
- equalTo
- notEqualTo
# Usage
## template driven
import `FormsModule` and `CustomFormsModule` in *app.module.ts*
```javascript
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
```html
error message
```
### min
```html
error message
```
### gt
```html
error message
```
### gte
```html
error message
```
### max
```html
error message
```
### lt
```html
error message
```
### lte
```html
error message
```
### range
```html
error message
```
### digits
```html
error message
```
### number
```html
error message
```
### url
```html
error message
```
### email
```html
error message
```
### date
```html
error message
```
### minDate
```html
error message
```
### maxDate
```html
error message
```
### dateISO
```html
error message
```
### creditCard
```html
error message
```
### json
```html
error message
```
### base64
```html
error message
```
### phone
```html
error message
```
details see [libphonenumber](https://github.com/halt-hammerzeit/libphonenumber-js)
### uuid
```html
error message
```
*default*: all
**support**
- 3
- 4
- 5
- all
### equal
```html
error message
```
### equal
```html
error message
```
### equalTo
```html
required error
equalTo error
```
### notEqualTo
```html
required error
equalTo error
```
## model driven
import `ReactiveFormsModule` in *app.module.ts*
```javascript
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*
```javascript
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]))
});
}
}
```
```html
error message
```
### rangeLength
```javascript
new FormControl('', CustomValidators.rangeLength([5, 9]))
```
### min
```javascript
new FormControl('', CustomValidators.min(10))
```
### gt
```javascript
new FormControl('', CustomValidators.gt(10))
```
### max
```javascript
new FormControl('', CustomValidators.max(20))
```
### lt
```javascript
new FormControl('', CustomValidators.lt(20))
```
### range
```javascript
new FormControl('', CustomValidators.range([10, 20]))
```
### digits
```javascript
new FormControl('', CustomValidators.digits)
```
### number
```javascript
new FormControl('', CustomValidators.number)
```
### url
```javascript
new FormControl('', CustomValidators.url)
```
### email
```javascript
new FormControl('', CustomValidators.email)
```
### date
```javascript
new FormControl('', CustomValidators.date)
```
### minDate
```javascript
new FormControl('', CustomValidators.minDate('2016-09-09'))
```
### maxDate
```javascript
new FormControl('', CustomValidators.maxDate('2016-09-09'))
```
### dateISO
```javascript
new FormControl('', CustomValidators.dateISO)
```
### creditCard
```javascript
new FormControl('', CustomValidators.creditCard)
```
### json
```javascript
new FormControl('', CustomValidators.json)
```
### base64
```javascript
new FormControl('', CustomValidators.base64)
```
### phone
```javascript
new FormControl('', CustomValidators.phone('zh-CN'))
```
### uuid
```javascript
new FormControl('', CustomValidators.uuid('3'))
```
### equal
```javascript
new FormControl('', CustomValidators.equal('xxx'))
```
### notEqual
```javascript
new FormControl('', CustomValidators.notEqual('xxx'))
```
### equalTo
```javascript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));
this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
```
```html
required error
equalTo error
```
### notEqualTo
```javascript
let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));
this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
```
```html
required error
notEqualTo error
```
# License
MIT