xsc-angular2-validator
1.0.2 • Public • Published
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 {
Validator = new XSCValidator();
save()
{
var formID = 'validationform';
var status = this.Validator.isValid(formID);
alert('Form status : ' + status);
}
}
Dependencies (0)
Dev Dependencies (0)
Package Sidebar
Install
npm i xsc-angular2-validator
Weekly Downloads