ng-absolute-validator v2.0.2

Angular Absolute Validator

Like no other form validation library, simply write in English your requirements inside your form HTML tags, Abosolute validator will does the rest.

New Features

• No more add field name for reactive validation .
• Now add error message with multiple language.
• Set fallback language for empty main message
• Add language and message object in application root.
• Add inline error message with multi language support.

Dependencies

This Library requires moment to be installed.

Documentation

Go to Full Documentation

Installation

To install this library, run:

$ npm install ng-absolute-validator

Import FormsModule and NgAbsoluteValidatorModule in your Angular AppModule:

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
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

Add CSS Style for color effect on validation

Add CSS style to application style.css file to get color effect on validation.

.ng-invalid:not(form):not(.ng-untouched){
    border: 1px solid red;
}
.ng-valid:not(form){
    border: 1px solid green;
}

Template driven form validation Example

Once your library is imported, you can use validation display message component and directive to activate validation process.

<!-- For directive use -->
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
	<input [above]="<number>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
    <ng-absolute-validator  [formInstance]="<name>" (onValid)="getStatus($event)"></ng-absolute-validator>
</form>

<!-- For Chain validation -->
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
	<input [Rule]="required|integer|above:20" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
	<ng-absolute-validator  [formInstance]="<name>" (onValid)="getStatus($event)"></ng-absolute-validator>    
</form>

Reactive form validation Example

import { Component, Input } from '@angular/core';
import { ReactiveValidator } from '@package/services/reactive.validate';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-reactive',
    templateUrl: './reactive.component.html',
    styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent{

	public form  : FormGroup;

  	constructor(
      	private fb : FormBuilder,
		private rv : ReactiveValidator,
	){this.generteForm()}
	
	public aboveMessage : any = {
		en:{above:'The :attribute should be above :arg0.'},
		ar:{above:'ال :attribute يجب أن يكون أعلاه :arg0.'}
	}

	public formRules  = {
		above			: ['',this.rv.map('above:20',this.aboveMessage)],
		dimension       : ['',
			this.rv.map('image'),
			this.rv.dimension('width=200px,height=200px')
		],
		username    	: ['',
			this.rv.map('string'),
			this.rv.exists('http://jsonplaceholder.typicode.com/users,GET')
		],
		email    	    : ['',
			this.rv.map('email'),
			this.rv.unique('http://jsonplaceholder.typicode.com/users,GET')
		],
	}

  	generteForm(){
		this.form = this.fb.group(this.formRules)
	}
}                                                              
                                                                                    

Validation Rules

All validation rules and error message details are given on documentation Full Documentation

License

This project is licensed under the terms of the MIT license.