error message
``` +### gt + +```html + +error message
+``` + ### max ```html @@ -84,6 +93,13 @@ export class AppModule {error message
``` +### lt + +```html + +error message
+``` + ### range ```html @@ -301,12 +317,24 @@ new FormControl('', CustomValidators.rangeLength([5, 9])) new FormControl('', CustomValidators.min(10)) ``` +### gt + +```javascript +new FormControl('', CustomValidators.gt(10)) +``` + ### max ```javascript new FormControl('', CustomValidators.max(20)) ``` +### lt + +```javascript +new FormControl('', CustomValidators.lt(20)) +``` + ### range ```javascript diff --git a/package.json b/package.json index 8cd78dd..014cca3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-validation", - "version": "3.3.0", + "version": "3.6.1", "description": "angular2 validation", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/custom-validators.ts b/src/custom-validators.ts index 5834897..e4611bc 100644 --- a/src/custom-validators.ts +++ b/src/custom-validators.ts @@ -39,6 +39,30 @@ export class CustomValidators { }; } + /** + * Validator that requires controls to have a value greater than a gt value. + */ + static gt(gt: number): ValidatorFn { + return (control: AbstractControl): {[key: string]: any} => { + if (isPresent(Validators.required(control))) return null; + + let v: number = control.value; + return v > gt ? null : {'gt': true}; + }; + } + + /** + * Validator that requires controls to have a value less than a lt value. + */ + static lt(lt: number): ValidatorFn { + return (control: AbstractControl): {[key: string]: any} => { + if (isPresent(Validators.required(control))) return null; + + let v: number = control.value; + return v < lt ? null : {'lt': true}; + }; + } + /** * Validator that requires controls to have a value of a range value. */ diff --git a/src/directives.ts b/src/directives.ts index b79368f..ffd442f 100644 --- a/src/directives.ts +++ b/src/directives.ts @@ -2,7 +2,9 @@ import { NgModule, Directive } from '@angular/core'; import { RangeLengthValidator } from './directives/range-length'; import { MinValidator } from './directives/min'; +import { GreaterThanValidator } from './directives/greater-than'; import { MaxValidator } from './directives/max'; +import { LessThanValidator } from './directives/less-than'; import { RangeValidator } from './directives/range'; import { DigitsValidator } from './directives/digits'; import { NumberValidator } from './directives/number'; @@ -24,7 +26,9 @@ import { NotEqualToValidator } from './directives/not-equal-to'; export const CUSTOM_FORM_DIRECTIVES: Directive[] = [ RangeLengthValidator, MinValidator, + GreaterThanValidator, MaxValidator, + LessThanValidator, RangeValidator, DigitsValidator, NumberValidator, diff --git a/src/directives/equal.ts b/src/directives/equal.ts index c79fe0e..3adac75 100644 --- a/src/directives/equal.ts +++ b/src/directives/equal.ts @@ -17,6 +17,7 @@ export class EqualValidator implements Validator, OnInit, OnChanges { @Input() equal: any; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.equal(this.equal); @@ -26,6 +27,7 @@ export class EqualValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'equal') { this.validator = CustomValidators.equal(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class EqualValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } \ No newline at end of file diff --git a/src/directives/greater-than.ts b/src/directives/greater-than.ts new file mode 100644 index 0000000..850a933 --- /dev/null +++ b/src/directives/greater-than.ts @@ -0,0 +1,42 @@ +import { Directive, Input, forwardRef, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms'; + +import { CustomValidators } from '../index'; + +const GREATER_THAN_VALIDATOR: any = { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => GreaterThanValidator), + multi: true +}; + +@Directive({ + selector: '[gt][formControlName],[gt][formControl],[gt][ngModel]', + providers: [GREATER_THAN_VALIDATOR] +}) +export class GreaterThanValidator implements Validator, OnInit, OnChanges { + @Input() gt: number; + + private validator: ValidatorFn; + private onChange: () => void; + + ngOnInit() { + this.validator = CustomValidators.gt(this.gt); + } + + ngOnChanges(changes: SimpleChanges) { + for (let key in changes) { + if (key === 'gt') { + this.validator = CustomValidators.gt(changes[key].currentValue); + if (this.onChange) this.onChange(); + } + } + } + + validate(c: AbstractControl): {[key: string]: any} { + return this.validator(c); + } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } +} diff --git a/src/directives/less-than.ts b/src/directives/less-than.ts new file mode 100644 index 0000000..ce56dd7 --- /dev/null +++ b/src/directives/less-than.ts @@ -0,0 +1,42 @@ +import { Directive, Input, forwardRef, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms'; + +import { CustomValidators } from '../index'; + +const LESS_THAN_VALIDATOR: any = { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => LessThanValidator), + multi: true +}; + +@Directive({ + selector: '[lt][formControlName],[lt][formControl],[lt][ngModel]', + providers: [LESS_THAN_VALIDATOR] +}) +export class LessThanValidator implements Validator, OnInit, OnChanges { + @Input() lt: number; + + private validator: ValidatorFn; + private onChange: () => void; + + ngOnInit() { + this.validator = CustomValidators.lt(this.lt); + } + + ngOnChanges(changes: SimpleChanges) { + for (let key in changes) { + if (key === 'lt') { + this.validator = CustomValidators.lt(changes[key].currentValue); + if (this.onChange) this.onChange(); + } + } + } + + validate(c: AbstractControl): {[key: string]: any} { + return this.validator(c); + } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } +} diff --git a/src/directives/max-date.ts b/src/directives/max-date.ts index 8fa3617..7b5141f 100644 --- a/src/directives/max-date.ts +++ b/src/directives/max-date.ts @@ -17,6 +17,7 @@ export class MaxDateValidator implements Validator, OnInit, OnChanges { @Input() maxDate; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.maxDate(this.maxDate); @@ -26,6 +27,7 @@ export class MaxDateValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'maxDate') { this.validator = CustomValidators.maxDate(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class MaxDateValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/max.ts b/src/directives/max.ts index cfc76ef..dddd260 100644 --- a/src/directives/max.ts +++ b/src/directives/max.ts @@ -17,6 +17,7 @@ export class MaxValidator implements Validator, OnInit, OnChanges { @Input() max: number; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.max(this.max); @@ -26,6 +27,7 @@ export class MaxValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'max') { this.validator = CustomValidators.max(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class MaxValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/min-date.ts b/src/directives/min-date.ts index 343bef4..c3d6bce 100644 --- a/src/directives/min-date.ts +++ b/src/directives/min-date.ts @@ -17,6 +17,7 @@ export class MinDateValidator implements Validator, OnInit, OnChanges { @Input() minDate; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.minDate(this.minDate); @@ -26,6 +27,7 @@ export class MinDateValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'minDate') { this.validator = CustomValidators.minDate(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class MinDateValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/min.ts b/src/directives/min.ts index 3e1e28b..33f2f2b 100644 --- a/src/directives/min.ts +++ b/src/directives/min.ts @@ -17,6 +17,7 @@ export class MinValidator implements Validator, OnInit, OnChanges { @Input() min: number; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.min(this.min); @@ -26,6 +27,7 @@ export class MinValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'min') { this.validator = CustomValidators.min(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class MinValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/phone.ts b/src/directives/phone.ts index 06b14d9..6fe92d9 100644 --- a/src/directives/phone.ts +++ b/src/directives/phone.ts @@ -17,6 +17,7 @@ export class PhoneValidator implements Validator, OnInit, OnChanges { @Input() phone: string; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.phone(this.phone); @@ -26,6 +27,7 @@ export class PhoneValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'phone') { this.validator = CustomValidators.phone(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class PhoneValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/range-length.ts b/src/directives/range-length.ts index 3ad20fb..8bd0068 100644 --- a/src/directives/range-length.ts +++ b/src/directives/range-length.ts @@ -17,6 +17,7 @@ export class RangeLengthValidator implements Validator, OnInit, OnChanges { @Input() rangeLength: [number]; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.rangeLength(this.rangeLength); @@ -26,6 +27,7 @@ export class RangeLengthValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'rangeLength') { this.validator = CustomValidators.rangeLength(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class RangeLengthValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/range.ts b/src/directives/range.ts index 67cc626..bbc5225 100644 --- a/src/directives/range.ts +++ b/src/directives/range.ts @@ -17,6 +17,7 @@ export class RangeValidator implements Validator, OnInit, OnChanges { @Input() range: [number]; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.range(this.range); @@ -26,6 +27,7 @@ export class RangeValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'range') { this.validator = CustomValidators.range(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class RangeValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/directives/uuid.ts b/src/directives/uuid.ts index f362b47..e010127 100644 --- a/src/directives/uuid.ts +++ b/src/directives/uuid.ts @@ -17,6 +17,7 @@ export class UUIDValidator implements Validator, OnInit, OnChanges { @Input() uuid; private validator: ValidatorFn; + private onChange: () => void; ngOnInit() { this.validator = CustomValidators.uuid(this.uuid); @@ -26,6 +27,7 @@ export class UUIDValidator implements Validator, OnInit, OnChanges { for (let key in changes) { if (key === 'uuid') { this.validator = CustomValidators.uuid(changes[key].currentValue); + if (this.onChange) this.onChange(); } } } @@ -33,4 +35,8 @@ export class UUIDValidator implements Validator, OnInit, OnChanges { validate(c: AbstractControl): {[key: string]: any} { return this.validator(c); } + + registerOnValidatorChange(fn: () => void): void { + this.onChange = fn; + } } diff --git a/src/specs/custom-validators.spec.ts b/src/specs/custom-validators.spec.ts index 6381382..be1274d 100644 --- a/src/specs/custom-validators.spec.ts +++ b/src/specs/custom-validators.spec.ts @@ -55,6 +55,30 @@ describe('Custom Validators Min 10,', () => { }); }); +describe('Custom Validators GT 10,', () => { + let control: FormControl; + let validator: ValidatorFn; + + beforeEach(() => { + validator = CustomValidators.gt(10); + }); + + it('"9" should equal to "{gt: true}"', () => { + control = new FormControl(9); + expect(validator(control)).toEqual({gt: true}); + }); + + it('"10" should equal to "{gt: true}"', () => { + control = new FormControl(10); + expect(validator(control)).toEqual({gt: true}); + }); + + it('"11" should equal to "null"', () => { + control = new FormControl(11); + expect(validator(control)).toBeNull(); + }); +}); + describe('Custom Validators Max 20,', () => { let control: FormControl; let validator: ValidatorFn; @@ -79,6 +103,30 @@ describe('Custom Validators Max 20,', () => { }); }); +describe('Custom Validators LT 20,', () => { + let control: FormControl; + let validator: ValidatorFn; + + beforeEach(() => { + validator = CustomValidators.lt(20); + }); + + it('"19" should equal to "null"', () => { + control = new FormControl(19); + expect(validator(control)).toBeNull(); + }); + + it('"20" should equal to "{lt: true}"', () => { + control = new FormControl(20); + expect(validator(control)).toEqual({lt: true}); + }); + + it('"21" should equal to "{lt: true}"', () => { + control = new FormControl(21); + expect(validator(control)).toEqual({lt: true}); + }); +}); + describe('Custom Validators Range [4,9],', () => { let control: FormControl; let validator: ValidatorFn; @@ -598,4 +646,4 @@ describe('Custom Validators phone,', () => { }); }); -}); \ No newline at end of file +});