Open Source Ecosystems

  @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