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.

This library was generated with Angular CLI version 16.2.0.

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

| Rules | Description | | :--- | :--- | |above|Makes sure the value provided by the end user is above the expected value. This method will wrapboth the values| |accepted|Ensures that the field under validation is accepted. Empty strings, false, null, 0 and undefinedvalues will be considered as not accepted.| |after|Ensures the value of the field is after the expected date.| |alpha|Makes sure the field under validation is alpha only.| |alphaDash|Makes sure the field under validation is contain letters, numbers, dashes and underscores.| |alphaNumeric|Makes sure the field under validation is alpha numeric only.| |array|Ensure the value is a valid array. Also this validation will never validate the size of array.| |before|Ensures the value of field under validation is before a given date.| |boolean|Ensures the value of a field is a boolean. Also it will cast following strings to their booleancounter parts.| |confirmed|Ensures a field value as confirmed using a _confirmation convention. This is mainly used forpassword confirmation field.For example: If the password field name is password, then another field called password_confirmationmust exist and should have the same value as the actual field.| |creditCard|Ensures a field value must be a valid credit card number.| |cvv|Ensures a field value must be a CVV number.| |date|Ensures the field under validation is a valid date. The value can be a date object or a valid datestring.| |dateFormat|Ensures the date or date time is valid as the one of the defined formats.| |debitCard|Ensures a field value must be a valid debit card number.| |different|Ensures the value of the field under validation is always different from the targeted field value.| |dimension|Ensures the The file under validation must be an image meeting the dimension constraints asspecified by the accppeted params like: height=200,max_height=200,width=200,max_width=200,ratio=1.2| |email|Ensures the field under validation is a valid email format.| |endsWith|Ensure the value of field under validation ends with a certain substr. This validation will alsotrim whitespaces before making the check| |exists|Ensures the value is exists in database GET,POST,PUT,PATCH method isallowed for rmote validation. default method is GET.| |image|Ensures the upload file is an valid image file| |in|Ensures the value of a given field matches one of expected values.| |includes|Ensures the value of field under validation contains a given substring.| |integer|Ensures the value is a valid integer. Also string representation of a number will return true.| |ip|Ensures the value is a valid ip address as per ipv4 and ipv6 specs.| |ipv4|Ensures the value is a valid ip address as per ipv4 spec only.| |ipv6|Ensures the value is a valid ip address as per ipv6 spec only.| |json|Ensures the value of field under validation is safe to be parsed using JSON.parse method.| |max|Ensures the length of a string or array or number is not greater than the defined length.| |min|Ensures the length of a string or array or number is not is not less than the expected length| |mimes|Ensures the file must have a MIME type corresponding to one of the listed extensions.| |notEquals|Makes sure that the value of field under validation is not same as the defined value.| |notIn|Makes sure that the value of field under validation is not from one of the defined values.| |notRegex|Ensures the value of field under validation, passes the regex test. The regex can be defined as astring or a RegExp object.| |number|Makes sure that the value of field under validation is a valid number. The validation will pass forfloats too, since it uses typeof internally.| |phoneNo|Makes sure that the value of field under validation is a valid phone number. In default phone numberis validate more than 10 Style of number.To override the default behaviour pass new regex expressionto validate the number.| |range|Ensures the value of field under validation is under a given range. The values will be cased toNumber automatically.| |regex|Ensures the value of field under validation, passes the regex test. The regex can be defined as astring or a RegExp object.| |required|Ensures the value of field under validation is not empty.| |requiredIf|Ensures the field under validation must be present and not empty if the anotherfield field is equalto any value. The Match with field must be define or initialized or placed before validated field.| |requiredUnless|Ensures the field under validation must be present and not empty unless the anotherfield field isequal to any value. The Match with fields must be define or initialized or placed before validatedfield.| |requiredWith|Ensure The field under validation must be present and not empty only if any of the other specifiedfields are present. The Match with fields must be define or initialized or placed before validatedfield.| |requiredWithAll|Ensure The field under validation must be present and not empty only if all of the other specifiedfields are present. The Match with fields must be define or initialized or placed before validatedfield.| |requiredWithout|Ensure The field under validation must be present and not empty only when any of the other specifiedfields are not present. The Match with fields must be define or initialized or placed beforevalidated field.| |requiredWithoutAll|Ensure The field under validation must be present and not empty only when all of the other specifiedfields are not present. The Match with fields must be define or initialized or placed beforevalidated field.| |same|Ensures the value of 2 fields are same.| |size|Ensures the size of the file not more than the specific size (in KB).| |startsWith|Ensures the value of 2 fields are same.| |string|Ensures the value is a string.| |strength| Make sure the value strength should mach pre defined regex expression. Add or overide with new regex expression from root config. Add or modify progess bar color combination from root config. a : String must be 8 charecter long. b : String must contain one uppercase letter. c : String must contain one spatial charecter. d : String must contain one digit. b : String must contain one lowecase letter. | |under|Ensures the value of a field is under a certain value. All values will be casted to Number| |url|Ensures the value is a valid URL format.| |uuid|Ensures the value is a valid UUID format.| |unique|Ensures the value is unique in database GET,POST,PUT,PATCH method isallowed for rmote validation. default method is GET.| |video|Ensures the upload file is an valid video file|

License

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