Nightapes / Ngx Validators
Licence: mit
Validator library for Angular 2+
Stars: ✭ 128
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx Validators
Springbootangularhtml5
♨️ Spring Boot 2 + Angular 11 + HTML5 router mode + HTTP interceptor + Lazy loaded modules
Stars: ✭ 89 (-30.47%)
Mutual labels: angular2, angular4
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (-21.87%)
Mutual labels: angular2, angular4
Ng2 Flatpickr
Angular 2+ wrapper for flatpickr (https://github.com/chmln/flatpickr)
Stars: ✭ 91 (-28.91%)
Mutual labels: angular2, angular4
Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+1142.19%)
Mutual labels: angular2, angular4
Coreui Free Angular Admin Template
CoreUI Angular is free Angular 2+ admin template based on Bootstrap 4
Stars: ✭ 1,279 (+899.22%)
Mutual labels: angular2, angular4
Angular4 Primeng Admin
angular4-primeng-admin @angular/cli开发的后台模板
Stars: ✭ 99 (-22.66%)
Mutual labels: angular2, angular4
Paperadmin
A flat admin dashboard using Angular JS 2/4
Stars: ✭ 80 (-37.5%)
Mutual labels: angular2, angular4
Ng Packaged
An Angular library packaged by ng-packagr
Stars: ✭ 109 (-14.84%)
Mutual labels: angular2, angular4
Rebirth Ng
rebirth-ng is a ui framework for Angular & bootstrap.
Stars: ✭ 118 (-7.81%)
Mutual labels: angular2, angular4
Ng Gapi
ng-gapi a Google api module for Angular 6+
Stars: ✭ 126 (-1.56%)
Mutual labels: angular2, angular4
Angular Websocket
↖️ The missing Angular WebSocket module for connecting client applications to servers by @AngularClass
Stars: ✭ 1,242 (+870.31%)
Mutual labels: angular2, angular4
Angular Cropperjs
CropperJS integration for Angular +6
Stars: ✭ 88 (-31.25%)
Mutual labels: angular2, angular4
Ngx Jsonapi
JSON API client library for Angular 5+ 👌 :: Production Ready 🚀
Stars: ✭ 81 (-36.72%)
Mutual labels: angular2, angular4
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-28.12%)
Mutual labels: angular2, angular4
Ngx Lazy Load Images
Image lazy load library for Angular 2+
Stars: ✭ 77 (-39.84%)
Mutual labels: angular2, angular4
Ng Http Interceptor
Http Interceptor library for Angular
Stars: ✭ 108 (-15.62%)
Mutual labels: angular2, angular4
Aspnetcore Angular Universal
ASP.NET Core & Angular Universal advanced starter - PWA w/ server-side rendering for SEO, Bootstrap, i18n internationalization, TypeScript, unit testing, WebAPI REST setup, SignalR, Swagger docs, and more! By @TrilonIO
Stars: ✭ 1,455 (+1036.72%)
Mutual labels: angular2, angular4
ngx-validators
An implementation of various angular validators for Angular 2+.
List of validators
- Password
- Universal
- Creditcards
For validation of phone numbers see: ngx-phone-validators
Install
npm install ngx-validators --save-dev
Angular CLI
No config needed
Angular Seed
Add following to project.config.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 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
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
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
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' )
);
import {EmailValidators} from 'ngx-validators'
...
email: FormControl = new FormControl('', EmailValidators.normal);
email2: FormControl = new FormControl('', EmailValidators.simple);
email3: FormControl = new FormControl('', EmailValidators.suggest);
Universal
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
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
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
<form>
<input type="password" [(ngModel)]="model.password" name="password" #formControl="ngModel" password />
<span *ngIf="formControl.hasError('repeatCharacterRegexRule')">Password contains repeating characters</span>
<span *ngIf="formControl.hasError('digitCharacterRule')">Password should contain at least on digit</span>
<span *ngIf="formControl.hasError('alphabeticalCharacterRule')"
>Password should contain at least on alphabetical character</span
>
<span *ngIf="formControl.hasError('lowercaseCharacterRule')"
>Password should contain at least on lowercase character</span
>
<span *ngIf="formControl.hasError('uppercaseCharacterRule')"
>Password should contain at least on uppercase character</span
>
</form>
// Override values
<input
type="password"
[(ngModel)]="model.password"
name="password"
#formControl="ngModel"
password
[repeatCharacter]="2"
[alphabeticalCharacter]="2"
[digitCharacter]="2"
[lowercaseCharacter]="2"
[uppercaseCharacter]="2"
/>
Creditcard
<form>
<input type="text" [(ngModel)]="model.creditcard" name="creditcard" #formControl="ngModel" creditCard />
<span *ngIf="formControl.hasError('creditcard')">Is not a creditcard</span>
</form>
// Override values // Test only for a specific creditcard
<input
type="text"
[(ngModel)]="model.creditcard"
name="creditcard"
#formControl="ngModel"
[creditCard]="all|americanExpress|dinersclub|discover|jcb|maestro|mastercard|visa"
/>
Normal
<form>
<input type="text" [(ngModel)]="model.email" name="email" #formControl="ngModel" email />
<span *ngIf="formControl.hasError('normalEmailRule')">Is not a email</span>
</form>
Suggest
<form>
<input type="text" [(ngModel)]="model.email" name="email" #formControl="ngModel" emailSuggest />
<span *ngIf="formControl.hasError('suggestion')">Maybe check the mail again</span>
</form>
Universal
whitespace
<form>
<input type="text" [(ngModel)]="model.firstname" name="firstname" #formControl="ngModel" noWhitespace />
<span *ngIf="formControl.hasError('noWhitespaceRequired')">Should not contain a whitespace</span>
</form>
isNumber
<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" isNumber />
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
</form>
isInRange
<form>
<input
type="number"
[(ngModel)]="model.amount"
name="amount"
#formControl="ngModel"
isInRange
[minValue]="2"
[maxValue]="4"
/>
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
<span *ngIf="formControl.hasError('rangeValueToSmall')">Number to small</span>
<span *ngIf="formControl.hasError('rangeValueToBig')">Number to big</span>
</form>
min
<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" [min]="2" />
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
<span *ngIf="formControl.hasError('min')">Number to small</span>
</form>
max
<form>
<input type="number" [(ngModel)]="model.amount" name="amount" #formControl="ngModel" [max]="2" />
<span *ngIf="formControl.hasError('numberRequired')">Needs to be a number</span>
<span *ngIf="formControl.hasError('max')">Number to small</span>
</form>
##Todo
- Add more password rules
- Add address validator
Get the complete changelog here: https://github.com/Nightapes/ngx-validators/releases
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].