https://github.com/sabrio/ng2-validation-manager
Validation manager library for Angular 2 (based on Laravel Validation method)
https://github.com/sabrio/ng2-validation-manager
angular-cli angular-validation angular2 form-validation laravel-style validation validation-builder
Last synced: 3 months ago
JSON representation
Validation manager library for Angular 2 (based on Laravel Validation method)
- Host: GitHub
- URL: https://github.com/sabrio/ng2-validation-manager
- Owner: sabrio
- Created: 2016-12-23T15:36:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-06-11T10:46:41.000Z (almost 6 years ago)
- Last Synced: 2025-01-31T21:52:17.483Z (3 months ago)
- Topics: angular-cli, angular-validation, angular2, form-validation, laravel-style, validation, validation-builder
- Language: TypeScript
- Size: 1.28 MB
- Stars: 34
- Watchers: 3
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ng2-validation-manager
ng2-validation-manager is simple and flexible library for reactive form validation in angular 2+
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')}}
{{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 |
| getData() | [] => {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