fix(forms): Validation compliant to ngModel (#575)

* Added validation ngModel compliant * upgrade angular packages version * upgrade angular peerDependencies version
valor-software · Jan 17, 2017 · aaadcbb · aaadcbb
1 parent f9750f4
commit aaadcbb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/.config/bundle-system.js b/.config/bundle-system.js
@@ -42,6 +42,7 @@ function getSystemJsBundleConfig(cb) {
       typescript: path.resolve('node_modules/typescript/lib/typescript.js'),
       '@angular/core': path.resolve('node_modules/@angular/core/index.js'),
       '@angular/common': path.resolve('node_modules/@angular/common/index.js'),
+      '@angular/forms': path.resolve('node_modules/@angular/forms/index.js'),
       '@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'),
       '@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'),
       '@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'),
@@ -52,7 +53,7 @@ function getSystemJsBundleConfig(cb) {
     }
   };
 
-  config.meta = ['@angular/common','@angular/compiler','@angular/core',
+  config.meta = ['@angular/common', '@angular/forms', '@angular/compiler','@angular/core',
     '@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => {
     memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false};
     return memo;

diff --git a/components/select/select.ts b/components/select/select.ts
@@ -1,4 +1,5 @@
-import { Component, Input, Output, EventEmitter, ElementRef, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, OnInit, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { SelectItem } from './select-item';
 import { stripTags } from './select-pipes';
@@ -108,6 +109,15 @@ let styles = `
 @Component({
   selector: 'ng-select',
   styles: [styles],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      /* tslint:disable */
+      useExisting: forwardRef(() => SelectComponent),
+      /* tslint:enable */
+      multi: true
+    }
+  ],
   template: `
   <div tabindex="0"
      *ngIf="multiple === false"
@@ -242,7 +252,7 @@ let styles = `
   </div>
   `
 })
-export class SelectComponent implements OnInit {
+export class SelectComponent implements OnInit, ControlValueAccessor {
   @Input() public allowClear:boolean = false;
   @Input() public placeholder:string = '';
   @Input() public idField:string = 'id';
@@ -318,6 +328,9 @@ export class SelectComponent implements OnInit {
     return this._optionsOpened;
   }
 
+  protected onChange:any = Function.prototype;
+  protected onTouched:any = Function.prototype;
+
   private inputMode:boolean = false;
   private _optionsOpened:boolean = false;
   private behavior:OptionsBehavior;
@@ -437,6 +450,11 @@ export class SelectComponent implements OnInit {
     if ((this as any)[type] && value) {
       (this as any)[type].next(value);
     }
+
+    this.onTouched();
+    if (type === 'selected' || type === 'removed') {
+      this.onChange(this.active);
+    }
   }
 
   public clickedOutside():void {
@@ -448,6 +466,14 @@ export class SelectComponent implements OnInit {
     return this.itemObjects[0] && this.itemObjects[0].hasChildren();
   }
 
+  public writeValue(val:any):void {
+    this.active = val;
+    this.data.emit(this.active);
+  }
+
+  public registerOnChange(fn:(_:any) => {}):void {this.onChange = fn;}
+  public registerOnTouched(fn:() => {}):void {this.onTouched = fn;}
+
   protected matchClick(e:any):void {
     if (this._disabled === true) {
       return;

diff --git a/package.json b/package.json
@@ -47,20 +47,20 @@
   },
   "homepage": "https://github.com/valor-software/ng2-select#readme",
   "peerDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/compiler": "^2.0.0",
-    "@angular/core": "^2.0.0",
-    "@angular/forms": "^2.0.0"
+    "@angular/common": "2.1.0",
+    "@angular/compiler": "2.1.0",
+    "@angular/core": "2.1.0",
+    "@angular/forms": "2.1.0"
   },
   "dependencies": {},
   "devDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/compiler": "^2.0.0",
+    "@angular/common": "2.1.0",
+    "@angular/compiler": "2.1.0",
     "@angular/compiler-cli": "0.6.2",
-    "@angular/core": "^2.0.0",
-    "@angular/forms": "^2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/core": "2.1.0",
+    "@angular/forms": "2.1.0",
+    "@angular/platform-browser": "2.1.0",
+    "@angular/platform-browser-dynamic": "2.1.0",
     "@types/jasmine": "2.2.34",
     "@types/node": "6.0.39",
     "@types/webpack": "1.12.34",