ng2-validation-manager is simple and flexible library for reactive form validation in angular 2+
- ☑ Easy setup
- ☑ Dynamic messages
- ☑ +20 validation rules
- ☑ Custom errors messages
- ☑ Child FormGroup and FormArray
- ☐ Multiple languages
- ☐ Validator Expendable
npm i ng2-validation-manager --save
@NgModule({
imports: [
...
ReactiveFormsModule
]
})
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:
<form [formGroup]="form.getForm()" (ngSubmit)="save()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" formControlName="name">
<div *ngIf="form.hasError('name')" class="alert alert-danger">
{{form.getError('name')}}
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" formControlName="email">
<div *ngIf="form.hasError('email')" class="alert alert-danger">
{{form.getError('email')}}
</div>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" formControlName="username">
<div *ngIf="form.hasError('username')" class="alert alert-danger">
{{form.getError('username')}}
</div>
</div>
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" formControlName="description">
<div *ngIf="form.hasError('description')" class="alert alert-danger">
{{form.getError('description')}}
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" formControlName="password">
<div *ngIf="form.hasError('password')" class="alert alert-danger">
{{form.getError('password')}}
</div>
</div>
<div class="form-group">
<label>RE-Password</label>
<input type="repassword" class="form-control" formControlName="repassword">
<div *ngIf="form.hasError('repassword')" class="alert alert-danger">
{{form.getError('repassword')}}
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
| 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 |
The current validators/rules
Note: Validation rules are case-sensitive