ng2-validation-manager

ng2-validation-manager is simple and flexible library for reactive form validation in angular 2+

Demo

Main features

• ☑ Easy setup


• ☑ Dynamic messages


• ☑ +20 validation rules


• ☑ Custom errors messages


• ☑ Child FormGroup and FormArray


• ☐ Multiple languages


• ☐ Validator Expendable

Install

  npm i ng2-validation-manager --save

Import

@NgModule({
imports: [
...
ReactiveFormsModule
]
})

Usage

import {ValidationManager} from "ng2-validation-manager";

export class AppComponent implements OnInit{

form;

ngOnInit() {

this.form = new ValidationManager({
'name' : 'required|minLength:4|maxLength:12|alphaSpace',
'email' : 'required|email',
'username' : 'required|pattern:[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*',
'description' : {'rules': 'required|count:15', 'value': 'testing'},
'password' : 'required|rangeLength:8,50',
'repassword' : 'required|equalTo:password'
});

this.form.setValue({
'name': 'Default'
});

this.form.setErrorMessage('username', 'pattern', 'Pattern must be part of this family: [A-Za-z0-9.-_]');
}

save(){
if(this.form.isValid()){
alert('validation pass');
console.log(this.form.getData());
this.form.reset();
}
}
}


and your view would like like:

Name

{{form.getError('name')}}

Email

{{form.getError('email')}}

Username

{{form.getError('username')}}

Description

{{form.getError('description')}}

Password

{{form.getError('password')}}

RE-Password

{{form.getError('repassword')}}

Submit

Validation manager api

| Method| Return | Description |
|-------|------------------|-----------------------------------------------------|
| constructor(obj:{ field: rules }, ['invalid', 'dirty', 'submitted']) | | |
| getForm() | FormGroup | This method returns the FormGroup |
| isValid() | boolean | This method checks if the form is valid or not |
| reset() | void | This method resets the form |
| hasError(field) | boolean | This method checks if the form field is valid or not |
| getError(field) | string | This method returns the error of the field |
| getErrors() | []:string | This method returns array of errors |
| setErrorMessage(field, rule, message) | void | This method can change the defualt message of a particular rule |
| setValue(field, value) | void | This method sets value of field |
| getValue(field) | string | This method returns the value of field |
| getDate() | [] => {field:value} | This method returns array of pair key and value of your form |
| getChildGroup(groupName:string, [index:number = null]) | [] => {field:value} | This method returns child FormGroup or FormArray |
| addChildGroup(field, mgr: ValidationManager) | [] => {field:value} | |
| removeChildGroup(groupName:string, [index:number = null]) | [] => {field:value} | This method returns array of pair key and value of your form |

Validators

The current validators/rules

Note: Validation rules are case-sensitive