Rule chaining

Add multiple validation rules separate by '|' sign. The validation will start from left to right. All async validation need to use with atleast one sync validation. The custom message can be passed as 2nd paramiter of map method as well as dimension, exists and unique method. Async validation will not work in [Rule] directive.

#HTML Code Example for Reactive Form

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)
	}
}

#HTML Code Example for Template Driven Form

<!DOCTYPE html> 
<html lang="en"> 
    ...
    <form (ngSubmit)="onSubmit(form)" #form="ngForm">
		<input [Rule]="required|integer|above:20" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
	</form>
    ...
</html>