Description

Angular2 custom validation, inspired by jQuery validation.

Demo

See demo

Install

npm install xsc-angular2-validator

system.config.js

map: {
      // other stuff... 
      'xsc-angular2-validator': 'npm:xsc-angular2-validator'
    },
packages: {
    // other stuf... 
    'xsc-angular2-validator': {
      main: 'index',
      defaultExtension: 'js'
    },
}

Validators

• Compare
• Email
• Lowercase
• Maxchecked
• Maxlength
• Maxnumber
• Minchecked
• Minlength
• Minnumber
• Numeric
• Pattern
• Phone
• Range
• Required
• String
• Uppercase
• URL

How to use it

HTML

<form id="validationform">
  <div class="form-group">
      <label for="recipient-name" class="form-control-label">First Name:</label>
      <input type="text" class="form-control" id="first_name" name="first_name" value="" validation="required|email|minlength(5)|maxlength(10)|minchecked(2)|maxchecked(4)|range(1,2)|compare(#last_name)|url|phone|minnumber(2)|maxnumber(4)|pattern" pattern="/^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/" nice-name="First Name" error-tag="#first-name-error">
      <span id="first-name-error"></span>
  </div>
  <button class="btn btn-primary" type="button" (click)="save();">Add</button>
</form>

NOTE

Mandatory Attributes:

• validation : which holds the validation rules (<input validation="required|maxLength[5]")
• error-tag : which holds the error tag element class or id (<input error-tag="#first-name-error")
• pattern : Which is input attribute, used to mention pattern ()

Optional Attributes:

• nice-name : which would say beautiful name for the field (<input nice-name="First Name")

ts File

import { Component, OnInit } from '@angular/core';
import { XSCValidator } from 'xsc-angular2-validator';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  
  //An object for XSCValidator class
  Validator = new XSCValidator();
  
  save() 
  {
    var formID = 'validationform';
    var status = this.Validator.isValid(formID);
    alert('Form status : ' + status);
    //status holds form status ( true -> form is valid, false -> form is invalid )
  }
}