Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Nightapes/ngx-validators
Validator library for Angular 2+
https://github.com/Nightapes/ngx-validators
angular angular2 angular4 angular7 credit-card ngx-validators phone typescript
Last synced: 9 days ago
JSON representation
Validator library for Angular 2+
- Host: GitHub
- URL: https://github.com/Nightapes/ngx-validators
- Owner: Nightapes
- License: mit
- Created: 2016-05-10T17:36:36.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-11-14T11:38:14.000Z (almost 3 years ago)
- Last Synced: 2024-10-24T07:42:51.180Z (16 days ago)
- Topics: angular, angular2, angular4, angular7, credit-card, ngx-validators, phone, typescript
- Language: TypeScript
- Homepage: https://nightapes.github.io/ngx-validators
- Size: 2.71 MB
- Stars: 136
- Watchers: 5
- Forks: 26
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - ngx-validators
README
# ngx-validators
An implementation of various angular validators for Angular 13+.
For Angular < 12.x.x use version `v5.4.0`
# List of validators
1. Password
1. Email
1. Universal
1. Creditcards
For validation of phone numbers see: [ngx-phone-validators](https://github.com/Nightapes/ngx-phone-validators)
# Install
`npm install ngx-validators --save-dev`
## [Angular CLI](https://github.com/angular/angular-cli)
No config needed
## [Angular Seed](https://github.com/mgechev/angular-seed)
Add following to `project.config.ts`
```ts
let additionalPackages: ExtendPackages[] = [
{
name: "ngx-validators",
path: "node_modules/ngx-validators/bundles/ngx-validators.umd.min.js",
},
];
this.addPackagesBundles(additionalPackages);
```
## Password validators
The rules are from https://github.com/vt-middleware/passay
The password validators are:
- repeatCharacterRegexRule
- whitespaceRule (moved to UniversalValidators)
- allowedCharacterRule
- alphabeticalCharacterRule
- digitCharacterRule
- lowercaseCharacterRule
- uppercaseCharacterRule
- specialCharacterRule
- more will come
## Email validators
- simple (only checks if it looks like a mail)
- normal (follows the [HTML5](https://www.w3.org/TR/html5/forms.html#valid-e-mail-address) rules)
## Universal validators
- noWhitespace
- noEmptyString
- isNumber
- isInRange
- minLength
- maxLength
## Creditcard validators
- americanexpress
- visa
- dinersclub
- discover
- jcb
- maestro
- mastercard
## Install
```
npm install ngx-validators --save
```
## How to use [model driven]
needs: `ReactiveFormsModule`
### Passwords
```ts
import {PasswordValidators} from 'ngx-validators'
...
password: FormControl = new FormControl('', Validators.compose([
PasswordValidators.repeatCharacterRegexRule(4),
PasswordValidators.alphabeticalCharacterRule(1),
PasswordValidators.digitCharacterRule(1),
PasswordValidators.lowercaseCharacterRule(1),
PasswordValidators.uppercaseCharacterRule(1),
PasswordValidators.specialCharacterRule(1),
PasswordValidators.allowedCharacterRule(['a', 'b'])
]));
```
### Password mismatch
```ts
import {PasswordValidators} from 'ngx-validators'
...
let password: FormControl = new FormControl('testPassword');
let confirmPassword: FormControl = new FormControl('testPassword');
let form = new FormGroup({
'newPassword': password,
'confirmPassword': confirmPassword
}, PasswordValidators.mismatchedPasswords()
);
```
#### Override control name
```ts
import {PasswordValidators} from 'ngx-validators'
...
let password: FormControl = new FormControl('testPassword');
let confirmPassword: FormControl = new FormControl('testPassword');
let form = new FormGroup({
'testName': password,
'testName2': confirmPassword
}, PasswordValidators.mismatchedPasswords('testName', 'testName2' )
);
```
### Email
```ts
import {EmailValidators} from 'ngx-validators'
...
email: FormControl = new FormControl('', EmailValidators.normal);
email2: FormControl = new FormControl('', EmailValidators.simple);
email3: FormControl = new FormControl('', EmailValidators.suggest);
```
### Universal
```ts
import {UniversalValidators} from 'ngx-validators'
...
control: FormControl = new FormControl('', UniversalValidators.noWhitespace);
control: FormControl = new FormControl('', UniversalValidators.isNumber);
control: FormControl = new FormControl('', UniversalValidators.isInRange(2, 5));
control: FormControl = new FormControl('', UniversalValidators.minLength(2));
control: FormControl = new FormControl('', UniversalValidators.maxLength(7));
control: FormControl = new FormControl('', UniversalValidators.min(2));
control: FormControl = new FormControl('', UniversalValidators.max(2));
```
### Creditcards
```ts
import {CreditCardValidators} from 'ngx-validators'
...
control: FormControl = new FormControl('', UniversalValidators.isCreditCard);
control: FormControl = new FormControl('', UniversalValidators.americanExpress);
control: FormControl = new FormControl('', UniversalValidators.dinersclub);
control: FormControl = new FormControl('', UniversalValidators.discover);
control: FormControl = new FormControl('', UniversalValidators.jcb);
control: FormControl = new FormControl('', UniversalValidators.maestro);
control: FormControl = new FormControl('', UniversalValidators.mastercard);
control: FormControl = new FormControl('', UniversalValidators.visa);
```
## How to use [template driven]
needs `FormsModule and ValidatorsModule`
```ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { ValidatorsModule } from "ngx-validators";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule, FormsModule, ValidatorsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
```
### Password
```html
Password contains repeating characters
Password should contain at least on digit
Password should contain at least on alphabetical character
Password should contain at least on lowercase character
Password should contain at least on uppercase character
// Override values
```
### Creditcard
```html
Is not a creditcard
// Override values // Test only for a specific creditcard
```
### Email
#### Normal
```html
Is not a email
```
#### Suggest
```html
Maybe check the mail again
```
### Universal
#### whitespace
```html
Should not contain a whitespace
```
#### isNumber
```html
Needs to be a number
```
#### isInRange
```html
Needs to be a number
Number to small
Number to big
```
#### min
```html
Needs to be a number
Number to small
```
#### max
```html
Needs to be a number
Number to small
```
#### type
```html
Needs to be a string
```
##Todo
- Add more password rules
- Add address validator
Get the complete changelog here: https://github.com/Nightapes/ngx-validators/releases