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:

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

Validation manager api

Validators

The current validators/rules

Note: Validation rules are case-sensitive