Installation
#Step 1
Install absolute validator in your application using commend line interface from npm repository
npm i @sbcore/ng-absolute-validator@14.1
#Step 2
- import 'FormsModule' add in your '@NgModule' import section.
- import 'NgAbsoluteValidatorModule ' add in your '@NgModule' import section.
- For Reactive valiadtion import 'ReactiveFormsModule' add in your '@NgModule' import section.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NgAbsoluteValidatorModule } from 'ng-absolute-validator';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgAbsoluteValidatorModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
#Step 3
If there is any need to change default configuration, Then pass data object through 'forRoot'. It configured apply for whole application.
NgAbsoluteValidatorModule.forRoot()
// Code Sample
NgAbsoluteValidatorModule.forRoot({
defaultLanguage :'en',
remoteLoader :true,
delayLoader :200,
strengthBar :true,
strengthColor:[
{max:25,color:'#d9534f'},
{min:26,max:50,color:'#f0ad4e'},
{min:51,max:75,color:'#5bc0de'},
{min:76,color:'#5cb85c'}
],
strengthLevel : [
{id:'a',regex:'.{8}'},
{id:'b',regex:'(?=.*[A-Z])'},
{id:'c',regex:'(?=.*[!@#$&*])'},
{id:'d',regex:'(?=.*[0-9])'},
{id:'e',regex:'(?=.*[a-z])'},
],
translations: {
en:{<rule_name>:<rule_message_in_english>},
ar:{<rule_name>:<rule_message_in_arabic>}
}
})
#Config Options
| Params | Description | Default | Accept |
| defaultLanguage | Set fallaback language for validation message | en | en |
| translations | Bring your own error messages by passing a language code and a message object. You can also add new languages or replace existing translations globally. | ||
| remoteLoader | Switch On/Off loader during remote validation | True | Boolean |
| delayLoader | Delay loader for a spefic milisecond. | 0 | Integer |
| strengthBar | Display strength bar with color combination. | True | Boolean |
| strengthColor | Modify your color combination depending on max and min score. | -- Follow Example -- | Object |
| strengthLevel | Add or modify your strength level by custom regex expressing. a-e is reserver. It can be modify or add new expression upto Z | -- Follow Example -- | Object |
| showErrorOn | Control when validation errors appear using showErrorOn: touched, dirty, submit, or always. This setting is applied globally across the library. |
touched + dirty |
touched, dirty, submit, always |
| showAllErrors | Choose whether to show all validation errors at once, or stop at the first invalid rule and display only that one. | false | Boolean |