fix: equalTo bug #5

yuyang041060120 · Sep 28, 2016 · 0f4358b · 0f4358b
1 parent b3a2fd1
commit 0f4358b
Show file tree

Hide file tree

Showing 26 changed files with 840 additions and 754 deletions.
diff --git a/README.md b/README.md
@@ -205,9 +205,14 @@ export class AppModule {
 ### equalTo
 
 ```html
-<input type="password" ngModel name="password" #password="ngModel"/>
-<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
-<p *ngIf="certainPassword?.errors?.equalTo">error message</p>
+<form #demoForm="ngForm" novalidate>
+  <div ngModelGroup="passwordGroup" equalTo>
+    <input type="password" ngModel name="password" #password="ngModel" required/>
+    <p *ngIf="password?.errors?.required">required error</p>
+    <input type="password" ngModel name="certainPassword"/>
+    <p *ngIf="demoForm.form.controls.passwordGroup?.errors?.equalTo">equalTo error</p>
+  </div>
+</form>
 ```
 
 ## model driven
@@ -254,51 +259,139 @@ export class AppComponent {
 
 ```html
 <input type="text" formControlName="field"/>
-<p *ngIf="form.controls.field.errors?.rangeLength">error message</p>
+<p *ngIf="demoForm.from.controls.field.errors?.rangeLength">error message</p>
 ```
 
-### examples
+### rangeLength
+
+```javascript
+new FormControl('', CustomValidators.rangeLength([5, 9]))
+```
+
+### min
+
+```javascript
+new FormControl('', CustomValidators.min(10))
+```
+
+### max
+
+```javascript
+new FormControl('', CustomValidators.max(20))
+```
+
+### range
+
+```javascript
+new FormControl('', CustomValidators.range([10, 20]))
+```
+
+### digits
+
+```javascript
+new FormControl('', CustomValidators.digits)
+```
+
+### number
+
+```javascript
+new FormControl('', CustomValidators.number)
+```
+
+### url
+
+```javascript
+new FormControl('', CustomValidators.url)
+```
+
+### email
 
 ```javascript
-CustomValidators.rangeLength([5, 9])
+new FormControl('', CustomValidators.email)
+```
 
-CustomValidators.min(10)
+### date
 
-CustomValidators.max(20)
+```javascript
+new FormControl('', CustomValidators.date)
+```
 
-CustomValidators.range([10, 20])
+### dateISO
 
-CustomValidators.digits
+```javascript
+new FormControl('', CustomValidators.dateISO)
+```
 
-CustomValidators.number
+### creditCard
 
-CustomValidators.url
+```javascript
+new FormControl('', CustomValidators.creditCard)
+```
 
-CustomValidators.email
+### json
 
-CustomValidators.date
+```javascript
+new FormControl('', CustomValidators.json)
+```
 
-CustomValidators.dateISO
+### base64
 
-CustomValidators.creditCard
+```javascript
+new FormControl('', CustomValidators.base64)
+```
 
-CustomValidators.json
+### phone
 
-CustomValidators.base64
+```javascript
+new FormControl('', CustomValidators.phone('zh-CN'))
+```
 
-CustomValidators.phonoe('zh-CN')
+### uuid
 
-CustomValidators.uuid('3')
+```javascript
+new FormControl('', CustomValidators.uuid('3'))
+```
 
-CustomValidators.equal('xxx')
+### equal
 
-var password = new FormControl('', Validators.required);
-var certainPassword = new FormControl('', CustomValidators.equalTo(password));
+```javascript
+new FormControl('', CustomValidators.equal('xxx'))
+```
 
-this.form = new FormGroup({
-    password: password,
-    certainPassword: certainPassword
-});
+### equalTo
+
+```javascript
+@Component({
+  selector: 'app',
+  template: require('./app.html')
+})
+export class AppComponent implements OnInit {
+  form: FormGroup;
+
+  ngOnInit() {
+    var password = new FormControl('', Validators.required);
+    var certainPassword = new FormControl('');
+
+    this.form = new FormGroup({
+      passwordGroup: new FormGroup({
+        password: password,
+        certainPassword: certainPassword
+      }, CustomValidators.equalTo)
+    });
+  }
+}
+```
+
+```html
+<form [formGroup]="form" novalidate>
+  <div formGroupName="passwordGroup">
+    <input type="password" formControlName="password"/>
+    <p *ngIf="form.controls.passwordGroup.controls.password?.errors?.required">required error</p>
+    <input type="password" formControlName="certainPassword"/>
+    <p *ngIf="form.controls.passwordGroup?.errors?.equalTo">equalTo error</p>
+  </div>
+  <button>submit</button>
+</form>
 ```
 
 # License

diff --git a/example/src/app.component.ts b/example/src/app.component.ts
@@ -4,27 +4,25 @@ import { Validators, FormControl, FormGroup } from '@angular/forms';
 import { CustomValidators } from '../../src';
 
 @Component({
-    selector: 'app',
-    template: require('./app.html')
+  selector: 'app',
+  template: require('./app.html')
 })
 export class AppComponent implements OnInit {
-    form: FormGroup;
+  form: FormGroup;
 
-    constructor() {
-    }
+  ngOnInit() {
+    var password = new FormControl('', Validators.required);
+    var certainPassword = new FormControl('');
 
-    ngOnInit() {
-        var password = new FormControl('', Validators.required);
-        var certainPassword = new FormControl('', CustomValidators.equalTo(password));
-
-        this.form = new FormGroup({
-            password: password,
-            certainPassword: certainPassword
-        });
-    }
-
-    onSubmit() {
-        console.log(this.form);
-    }
+    this.form = new FormGroup({
+      passwordGroup: new FormGroup({
+        password: password,
+        certainPassword: certainPassword
+      }, CustomValidators.equalTo)
+    });
+  }
 
+  onSubmit(form) {
+    console.log(form);
+  }
 }
diff --git a/example/src/app.html b/example/src/app.html
@@ -1,48 +1,50 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
-    <!--<h4>rangeLength</h4>-->
-    <!--<input type="text" ngModel name="username" #username="ngModel" [rangeLength]="[5, 9]" />-->
-    <!--<p *ngIf="username?.errors?.rangeLength">rangeLength error</p>-->
+<form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>
+  <!--<h4>rangeLength</h4>-->
+  <!--<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>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>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>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>-->
+  <!--<h4>creditCard</h4>-->
+  <!--<input type="text" ngModel name="creditCard" #creditCard="ngModel" creditCard />-->
+  <!--<p *ngIf="creditCard?.errors?.creditCard">creditCard error</p>-->
 
-    <!--<h4>JSON</h4>-->
-    <!--<input type="text" ngModel name="json" #json="ngModel" json />-->
-    <!--<p *ngIf="json?.errors?.json">JSON error</p>-->
+  <!--<h4>JSON</h4>-->
+  <!--<input type="text" ngModel name="json" #json="ngModel" json />-->
+  <!--<p *ngIf="json?.errors?.json">JSON error</p>-->
 
-    <!--<h4>base64</h4>-->
-    <!--<input type="text" ngModel name="base" #base="ngModel" base64 />-->
-    <!--<p *ngIf="base?.errors?.base64">base64 error</p>-->
+  <!--<h4>base64</h4>-->
+  <!--<input type="text" ngModel name="base" #base="ngModel" base64 />-->
+  <!--<p *ngIf="base?.errors?.base64">base64 error</p>-->
 
-    <!--<h4>phone</h4>-->
-    <!--<input type="text" ngModel name="phone" #phone="ngModel" [phone]="'zh-CN'" />-->
-    <!--<p *ngIf="phone?.errors?.phone">phone error</p>-->
+  <!--<h4>phone</h4>-->
+  <!--<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]="4" />-->
-    <!--<p *ngIf="uuid?.errors?.uuid">UUID error</p>-->
+  <!--<h4>UUID</h4>-->
+  <!--<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'" />-->
-    <!--<p *ngIf="equal?.errors?.equal">equal error</p>-->
+  <!--<h4>equal to "xxx"</h4>-->
+  <!--<input type="text" ngModel name="equal" #equal="ngModel" [equal]="'xxx'" />-->
+  <!--<p *ngIf="equal?.errors?.equal">equal error</p>-->
 
+  <div ngModelGroup="passwordGroup" equalTo>
     <h4>equalTo to password</h4>
-    <input type="password" formControlName="password"/>
-    <p *ngIf="form.controls.password?.errors?.required">required error</p>
-    <input type="password" formControlName="certainPassword"/>
-    <p *ngIf="form.controls.certainPassword?.errors?.equalTo">equalTo error</p>
-    <button>submit</button>
+    <input type="password" ngModel name="password" #password="ngModel" required/>
+    <p *ngIf="password?.errors?.required">required error</p>
+    <input type="password" ngModel name="certainPassword"/>
+    <p *ngIf="demoForm.form.controls.passwordGroup?.errors?.equalTo">equalTo error</p>
+  </div>
+  <button>submit</button>
 </form>
diff --git a/example/src/app.module.ts b/example/src/app.module.ts
@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { CustomFormsModule } from '../../src';
 
 @NgModule({
-    imports: [BrowserModule, ReactiveFormsModule],
-    declarations: [AppComponent],
-    bootstrap: [AppComponent]
+  imports: [BrowserModule, ReactiveFormsModule, FormsModule, CustomFormsModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppModule {
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-validation",
-  "version": "1.4.2",
+  "version": "1.5.2",
   "description": "angular2 validation",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",