From 7895aeb659dad15dc6c832636eee216ea3fa0258 Mon Sep 17 00:00:00 2001
From: yuyang041060120 <yuyang041060120@gmail.com>
Date: Tue, 9 Aug 2016 16:17:52 +0800
Subject: [PATCH] redesign

---
 README.md                      | 14 +++++++-------
 example/src/app.component.ts   |  1 +
 example/src/app.html           | 20 ++++++++++++++++----
 package.json                   |  2 +-
 src/directives/equal.ts        | 10 ++++++----
 src/directives/max.ts          | 10 ++++++----
 src/directives/min.ts          | 10 ++++++----
 src/directives/phone.ts        | 10 ++++++----
 src/directives/range-length.ts | 10 ++++++----
 src/directives/range.ts        | 10 ++++++----
 src/directives/uuid.ts         | 10 ++++++----
 11 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index bea0df0..05457e3 100644
--- a/README.md
+++ b/README.md
@@ -76,28 +76,28 @@ export class AppComponent implements OnInit {
 ### rangeLength
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" rangeLength="[5, 9]"/>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/>
 <p *ngIf="field.errors?.rangeLength">error message</p>
 ```
 
 ### min
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" min="10"/>
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
 <p *ngIf="field.errors?.min">error message</p>
 ```
 
 ### max
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" max="20"/>
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20"/>
 <p *ngIf="field.errors?.max">error message</p>
 ```
 
 ### range
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" range="[10, 20]"/>
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]"/>
 <p *ngIf="field.errors?.range">error message</p>
 ```
 
@@ -167,7 +167,7 @@ export class AppComponent implements OnInit {
 ### phone
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" phone="zh-CN"/>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [phone]="'zh-CN'"/>
 <p *ngIf="field.errors?.phone">error message</p>
 ```
 
@@ -195,7 +195,7 @@ export class AppComponent implements OnInit {
 ### uuid
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" uuid="3"/>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'"/>
 <p *ngIf="field.errors?.uuid">error message</p>
 ```
 
@@ -211,7 +211,7 @@ export class AppComponent implements OnInit {
 ### equal
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" equal="xxx"/>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'"/>
 <p *ngIf="field.errors?.equal">error message</p>
 ```
 
diff --git a/example/src/app.component.ts b/example/src/app.component.ts
index 01fd9af..9131038 100644
--- a/example/src/app.component.ts
+++ b/example/src/app.component.ts
@@ -16,6 +16,7 @@ import { CUSTOM_FORM_DIRECTIVES } from '../../src';
     directives: [REACTIVE_FORM_DIRECTIVES, CUSTOM_FORM_DIRECTIVES]
 })
 export class AppComponent implements OnInit {
+    rangeLength = [5, 6];
 
     constructor() {
     }
diff --git a/example/src/app.html b/example/src/app.html
index e10765d..8f12667 100644
--- a/example/src/app.html
+++ b/example/src/app.html
@@ -1,8 +1,20 @@
 <form #form="ngForm" (ngSubmit)="onSubmit(form)" novalidate>
     <h4>rangeLength</h4>
-    <input type="text" ngModel name="username" #username="ngModel" rangeLength="[4,6]" />
+    <input type="text" ngModel name="username" #username="ngModel" [rangeLength]="[5, 9]" />
     <p *ngIf="username?.errors?.rangeLength">rangeLength error</p>
 
+    <h4>min</h4>
+    <input type="text" ngModel name="min" #min="ngModel" [min]="5" />
+    <p *ngIf="min?.errors?.min">min error</p>
+
+    <h4>max</h4>
+    <input type="text" ngModel name="max" #max="ngModel" [max]="9" />
+    <p *ngIf="max?.errors?.max">max error</p>
+
+    <h4>range</h4>
+    <input type="text" ngModel name="range" #range="ngModel" [range]="[5, 9]" />
+    <p *ngIf="range?.errors?.range">range error</p>
+
     <h4>creditCard</h4>
     <input type="text" ngModel name="creditCard" #creditCard="ngModel" creditCard />
     <p *ngIf="creditCard?.errors?.creditCard">creditCard error</p>
@@ -16,14 +28,14 @@ <h4>base64</h4>
     <p *ngIf="base?.errors?.base64">base64 error</p>
 
     <h4>phone</h4>
-    <input type="text" ngModel name="phone" #phone="ngModel" phone="zh-CN" />
+    <input type="text" ngModel name="phone" #phone="ngModel" [phone]="'zh-CN'" />
     <p *ngIf="phone?.errors?.phone">phone error</p>
 
     <h4>UUID</h4>
-    <input type="text" ngModel name="uuid" #uuid="ngModel" uuid />
+    <input type="text" ngModel name="uuid" #uuid="ngModel" [uuid]="4" />
     <p *ngIf="uuid?.errors?.uuid">UUID error</p>
 
     <h4>equal to "xxx"</h4>
-    <input type="text" ngModel name="equal" #equal="ngModel" equal="xxx" />
+    <input type="text" ngModel name="equal" #equal="ngModel" [equal]="'xxx'" />
     <p *ngIf="equal?.errors?.equal">equal error</p>
 </form>
\ No newline at end of file
diff --git a/package.json b/package.json
index eb8bc56..da07eae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-validation",
-  "version": "1.2.13",
+  "version": "1.3.0",
   "description": "angular2 validation",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
diff --git a/src/directives/equal.ts b/src/directives/equal.ts
index 8e45353..b207ce0 100644
--- a/src/directives/equal.ts
+++ b/src/directives/equal.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const EQUAL_VALIDATOR: any = {
     selector: '[equal][formControlName],[equal][formControl],[equal][ngModel]',
     providers: [EQUAL_VALIDATOR]
 })
-export class EqualValidator implements Validator {
+export class EqualValidator implements Validator, OnInit {
+    @Input() equal: string;
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('equal') equal: string) {
-        this.validator = CustomValidators.equal(equal);
+    ngOnInit() {
+        this.validator = CustomValidators.equal(this.equal);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {
diff --git a/src/directives/max.ts b/src/directives/max.ts
index 8fe055a..0fcf3a9 100644
--- a/src/directives/max.ts
+++ b/src/directives/max.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const MAX_VALIDATOR: any = {
     selector: '[max][formControlName],[max][formControl],[max][ngModel]',
     providers: [MAX_VALIDATOR]
 })
-export class MaxValidator implements Validator {
+export class MaxValidator implements Validator, OnInit {
+    @Input() max: number;
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('max') max: string) {
-        this.validator = CustomValidators.max(parseFloat(max));
+    ngOnInit() {
+        this.validator = CustomValidators.max(this.max);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {
diff --git a/src/directives/min.ts b/src/directives/min.ts
index 19413ef..60c6345 100644
--- a/src/directives/min.ts
+++ b/src/directives/min.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const MIN_VALIDATOR: any = {
     selector: '[min][formControlName],[min][formControl],[min][ngModel]',
     providers: [MIN_VALIDATOR]
 })
-export class MinValidator implements Validator {
+export class MinValidator implements Validator, OnInit {
+    @Input() min: number;
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('min') min: string) {
-        this.validator = CustomValidators.min(parseFloat(min));
+    ngOnInit() {
+        this.validator = CustomValidators.min(this.min);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {
diff --git a/src/directives/phone.ts b/src/directives/phone.ts
index be87869..cf7553a 100644
--- a/src/directives/phone.ts
+++ b/src/directives/phone.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const PHONE_VALIDATOR: any = {
     selector: '[phone][formControlName],[phone][formControl],[phone][ngModel]',
     providers: [PHONE_VALIDATOR]
 })
-export class PhoneValidator implements Validator {
+export class PhoneValidator implements Validator, OnInit {
+    @Input() phone: string;
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('phone') phone: string) {
-        this.validator = CustomValidators.phone(phone);
+    ngOnInit() {
+        this.validator = CustomValidators.phone(this.phone);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {
diff --git a/src/directives/range-length.ts b/src/directives/range-length.ts
index 3fb0657..91eaf78 100644
--- a/src/directives/range-length.ts
+++ b/src/directives/range-length.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const RANGE_LENGTH_VALIDATOR: any = {
     selector: '[rangeLength][formControlName],[rangeLength][formControl],[rangeLength][ngModel]',
     providers: [RANGE_LENGTH_VALIDATOR]
 })
-export class RangeLengthValidator implements Validator {
+export class RangeLengthValidator implements Validator,OnInit {
+    @Input() rangeLength: [number];
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('rangeLength') rangeLength: string) {
-        this.validator = CustomValidators.rangeLength(JSON.parse(rangeLength));
+    ngOnInit() {
+        this.validator = CustomValidators.rangeLength(this.rangeLength);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {
diff --git a/src/directives/range.ts b/src/directives/range.ts
index e302528..ff3662a 100644
--- a/src/directives/range.ts
+++ b/src/directives/range.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const RANGE_VALIDATOR: any = {
     selector: '[range][formControlName],[range][formControl],[range][ngModel]',
     providers: [RANGE_VALIDATOR]
 })
-export class RangeValidator implements Validator {
+export class RangeValidator implements Validator, OnInit {
+    @Input() range: [number];
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('range') range: string) {
-        this.validator = CustomValidators.range(JSON.parse(range));
+    ngOnInit() {
+        this.validator = CustomValidators.range(this.range);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {
diff --git a/src/directives/uuid.ts b/src/directives/uuid.ts
index d505ee4..3391fc2 100644
--- a/src/directives/uuid.ts
+++ b/src/directives/uuid.ts
@@ -1,4 +1,4 @@
-import { Directive, Attribute, forwardRef } from '@angular/core';
+import { Directive, Input, forwardRef, OnInit } from '@angular/core';
 import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl } from '@angular/forms';
 
 import { CustomValidators } from '../';
@@ -13,11 +13,13 @@ const UUID_VALIDATOR: any = {
     selector: '[uuid][formControlName],[uuid][formControl],[uuid][ngModel]',
     providers: [UUID_VALIDATOR]
 })
-export class UUIDValidator implements Validator {
+export class UUIDValidator implements Validator, OnInit {
+    @Input() uuid;
+
     private validator: ValidatorFn;
 
-    constructor(@Attribute('uuid') uuid: string) {
-        this.validator = CustomValidators.uuid(uuid);
+    ngOnInit() {
+        this.validator = CustomValidators.uuid(this.uuid);
     }
 
     validate(c: AbstractControl): {[key: string]: any} {