upgrade to support angular version 2.0.0-rc.5

yuyang041060120 · Aug 10, 2016 · 843e598 · 843e598
1 parent 2dd9eaa
commit 843e598
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -37,42 +37,26 @@ npm install ng2-validation --save
 - equal
 - equalTo
 
-> NOTE:creditCard, json, base64, phone and uuid come from [angular2 form validators](https://github.com/AngularClass/angular2-form-validators)
-
 # Usage
 
-First, you need use the latest form component, and disable deprecated forms.
-
-```javascript
-import { bootstrap }      from '@angular/platform-browser-dynamic';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
-
-import { AppComponent } from './src/app.component';
-
-bootstrap(AppComponent, [
-    disableDeprecatedForms(),
-    provideForms(),
-]).catch(err => console.error(err));
-```
-
-
-
 ## template driven
 
-First, import `CUSTOM_FORM_DIRECTIVES` and `REACTIVE_FORM_DIRECTIVES`, add them to component directives config.
+import `FormsModule` and `CustomFormsModule` in *app.module.ts*
 
 ```javascript
-import { Component } from '@angular/core';
-import { REACTIVE_FORM_DIRECTIVES, } from '@angular/forms';
-import { CUSTOM_FORM_DIRECTIVES } from 'ng2-validation';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { CustomFormsModule } from 'ng2-validation'
 
-@Component({
-    selector: 'app',
-    template: require('./app.html'),
-    directives: [REACTIVE_FORM_DIRECTIVES, CUSTOM_FORM_DIRECTIVES]
+import { AppComponent } from './app.component';
+
+@NgModule({
+    imports: [BrowserModule, FormsModule, CustomFormsModule],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
 })
-export class AppComponent implements OnInit {
-
+export class AppModule {
 }
 ```
 
@@ -228,17 +212,34 @@ export class AppComponent implements OnInit {
 
 ## model driven
 
-used like angular2 build-in validators.
+import `ReactiveFormsModule` in *app.module.ts*
+
+```javascript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+    imports: [BrowserModule, ReactiveFormsModule],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}
+```
+
+import `CustomValidators` in *app.component.ts*
 
 ```javascript
 import { Component } from '@angular/core';
-import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms';
-import { CUSTOM_FORM_DIRECTIVES, CustomValidators } from 'ng2-validation';
+import { FormGroup, FormControl } from '@angular/forms';
+import { CustomValidators } from 'ng2-validation';
 
 @Component({
     selector: 'app',
-    template: require('./app.html'),
-    directives: [REACTIVE_FORM_DIRECTIVES, CUSTOM_FORM_DIRECTIVES]
+    template: require('./app.html')
 })
 export class AppComponent {
     form: FormGroup;
@@ -252,7 +253,7 @@ export class AppComponent {
 ```
 
 ```html
-<input type="text" [formControl]="form.controls.field"/>
+<input type="text" formControlName="field"/>
 <p *ngIf="form.controls.field.errors?.rangeLength">error message</p>
 ```
 

diff --git a/example/main.ts b/example/main.ts
@@ -1,9 +1,5 @@
-import { bootstrap }      from '@angular/platform-browser-dynamic';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
+import { platformBrowserDynamic }      from '@angular/platform-browser-dynamic';
 
-import { AppComponent } from './src/app.component';
+import { AppModule } from './src/app.module';
 
-bootstrap(AppComponent, [
-    disableDeprecatedForms(),
-    provideForms(),
-]).catch(err => console.error(err));
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/example/src/app.component.ts b/example/src/app.component.ts
@@ -1,34 +1,30 @@
 import { Component, OnInit } from '@angular/core';
-import {
-    ValidatorFn,
-    AbstractControl,
-    Validators,
-    FormGroup,
-    REACTIVE_FORM_DIRECTIVES,
-    FormControl
-} from '@angular/forms';
+import { Validators, FormControl, FormGroup } from '@angular/forms';
 
-import { CUSTOM_FORM_DIRECTIVES } from '../../src';
+import { CustomValidators } from '../../src';
 
 @Component({
     selector: 'app',
-    template: require('./app.html'),
-    directives: [REACTIVE_FORM_DIRECTIVES, CUSTOM_FORM_DIRECTIVES]
+    template: require('./app.html')
 })
 export class AppComponent implements OnInit {
-    rangeLength = [5, 6];
+    form: FormGroup;
 
     constructor() {
     }
 
     ngOnInit() {
-        // this.form = new FormGroup({
-        //     username: new FormControl('', Validators.compose([CustomValidators.number]))
-        // });
+        var password = new FormControl('', Validators.required);
+        var certainPassword = new FormControl('', CustomValidators.equalTo(password));
+
+        this.form = new FormGroup({
+            password: password,
+            certainPassword: certainPassword
+        });
     }
 
-    onSubmit(form) {
-        console.log(form);
+    onSubmit() {
+        console.log(this.form);
     }
 
 }
diff --git a/example/src/app.html b/example/src/app.html
@@ -1,46 +1,48 @@
-<form #form="ngForm" (ngSubmit)="onSubmit(form)" novalidate>
-    <h4>rangeLength</h4>
-    <input type="text" ngModel name="username" #username="ngModel" [rangeLength]="[5, 9]" />
-    <p *ngIf="username?.errors?.rangeLength">rangeLength error</p>
+<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>-->
 
-    <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>-->
 
     <h4>equalTo to password</h4>
-    <input type="password" ngModel name="password" #password="ngModel"/>
-    <input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
-    <p *ngIf="certainPassword?.errors?.equalTo">equalTo error</p>
+    <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>
 </form>
diff --git a/example/src/app.module.ts b/example/src/app.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+    imports: [BrowserModule, ReactiveFormsModule],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-validation",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "angular2 validation",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/yuyang041060120/angular2-validate#readme",
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/forms": "0.2.0",
-    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/common": "2.0.0-rc.5",
+    "@angular/compiler": "2.0.0-rc.5",
+    "@angular/core": "2.0.0-rc.5",
+    "@angular/forms": "0.3.0",
+    "@angular/http": "2.0.0-rc.5",
+    "@angular/platform-browser": "2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
     "@types/jasmine": "^2.2.29",
     "@types/node": "^4.0.29",
     "core-js": "^2.4.1",

diff --git a/src/directives.ts b/src/directives.ts
@@ -1,3 +1,5 @@
+import { NgModule } from '@angular/core';
+
 import { RangeLengthValidator } from "./directives/range-length";
 import { MinValidator } from './directives/min';
 import { MaxValidator } from './directives/max';
@@ -16,7 +18,8 @@ import { UUIDValidator } from './directives/uuid';
 import { EqualValidator } from './directives/equal';
 import { EqualToValidator } from './directives/equal-to';
 
-export const CUSTOM_FORM_DIRECTIVES = [
+
+const CUSTOM_FORM_DIRECTIVES = [
     RangeLengthValidator,
     MinValidator,
     MaxValidator,
@@ -34,4 +37,11 @@ export const CUSTOM_FORM_DIRECTIVES = [
     UUIDValidator,
     EqualValidator,
     EqualToValidator
-];
+];
+
+@NgModule({
+    declarations: [CUSTOM_FORM_DIRECTIVES],
+    exports: [CUSTOM_FORM_DIRECTIVES]
+})
+export class CustomFormsModule {
+}
diff --git a/src/directives/equal-to.ts b/src/directives/equal-to.ts
@@ -19,7 +19,6 @@ export class EqualToValidator implements Validator, OnInit {
     private validator: ValidatorFn;
 
     ngOnInit() {
-        console.log(this.equalTo);
         this.validator = CustomValidators.equalTo(this.equalTo);
     }