Model bindings (#29)

* bind value to object by default * write value tests and fixes * small fixes * add more tests * Check if index > -1 * add more tests * update readme and demo
ng-select · Sep 19, 2017 · d976c37 · d976c37
1 parent 06b79a6
commit d976c37
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -74,12 +74,12 @@ map: {
 ### API
 | Input  | Type | Default | Required | Description |
 | ------------- | ------------- | ------------- | ------------- | ------------- |
-| [items] | Array<NgOption> | `[]` | yes | Items array|
-| labelKey  | string | `label` | no | Bind option display text to object property. Default `label`  |
-| valueKey  | string | `value` | no | Bind selected option model value to property or whole object if used as `valueKey="this"`. Default  `value`|
-| [clearable] | boolean | `true` | no | Set is allowed to clear selected value. Default `true`|
-| placeholder | string | `null` | no | Set placeholder text. Default `null`|
-| [typeahead] | Subject |  `null` | no | Set custom autocomplete or filter. Default `null`|
+| [items] | Array<NgOption> | `[]` | yes | Items array |
+| labelKey  | string | `label` | no | Object property to use for label. Default `label`  |
+| valueKey  | string | `-` | no | Object property to use for selected model. By default binds to whole object. |
+| [clearable] | boolean | `true` | no | Allow to clear selected value. Default `true`|
+| placeholder | string | `-` | no | Placeholder text. |
+| [typeahead] | Subject |  `-` | no | Custom autocomplete or filter. |
 
 | Output  | Description |
 | ------------- | ------------- |

diff --git a/src/demo/app/reactive-forms.component.ts b/src/demo/app/reactive-forms.component.ts
@@ -31,6 +31,7 @@ import {HttpClient} from '@angular/common/http';
             <div class="form-group">
                 <label for="state">Age</label>
                 <ng-select [items]="ages"
+                           valueKey="value"
                            placeholder="Select age"
                            formControlName="age">
                 </ng-select>

diff --git a/src/demo/app/select-autocomplete.component.ts b/src/demo/app/select-autocomplete.component.ts
@@ -8,7 +8,6 @@ import { Observable } from 'rxjs/Observable';
         <label>Search with autocomplete in Github accounts</label>
         <ng-select [items]="items"
                    labelKey="login"
-                   valueKey="this"
                    [typeahead]="typeahead"
                    [(ngModel)]="githubAccount">
 

diff --git a/src/demo/app/select-bindings.component.ts b/src/demo/app/select-bindings.component.ts
@@ -14,7 +14,6 @@ import {Component} from '@angular/core';
         <label>Bind model to object</label>
         <ng-select [items]="cities"
                    labelKey="name"
-                   valueKey="this"
                    placeholder="Select value"
                    [clearable]="false"
                    [(ngModel)]="selectedCity">

diff --git a/src/demo/app/select-multi.component.ts b/src/demo/app/select-multi.component.ts
@@ -4,23 +4,23 @@ import { NgOption } from '@ng-select/ng-select';
 @Component({
     template: `
         <label>Select multiple elements</label>
-        <ng-select [items]="companies"
-                   labelKey="name"
-                   valueKey="this"
-                   [multiple]="true"
-                   [(ngModel)]="selectedCompany">
+        <ng-select 
+            [items]="companies"
+            labelKey="name"
+            [multiple]="true"
+            [(ngModel)]="selectedCompany">
         </ng-select>
         <p>
             Selected value: {{selectedCompany | json}}
         </p>
 
         <label>Disabled multiple elements</label>
-        <ng-select [items]="companies2"
-                   labelKey="name"
-                   valueKey="this"
-                   [multiple]="true"
-                   [disabled]="disable"
-                   [(ngModel)]="selectedCompanyDisabled">
+        <ng-select 
+            [items]="companies2"
+            labelKey="name"
+            [multiple]="true"
+            [disabled]="disable"
+            [(ngModel)]="selectedCompanyDisabled">
         </ng-select>
         <br>
         <button class="btn btn-secondary btn-sm" (click)="disable = !disable">Toggle disabled</button>
@@ -31,6 +31,8 @@ export class SelectMultiComponent {
     companies: any[] = [];
     companies2: any[] = [];
     selectedCompany: any;
+    selectedCompanyDisabled: any;
+    disable = true;
 
     /* tslint:disable */
     companiesNames = ['Miškas', 'Žalias', 'Flexigen', 'Rooforia', 'Rooblia', 'Tropoli', 'Eargo', 'Gadtron', 'Elentrix', 'Terragen', 'Medalert', 'Xelegyl', 'Bristo', 'Xylar', 'Imperium', 'Kangle', 'Earwax', 'Zanity', 'Portico', 'Tsunamia', 'Kage', 'Comstar', 'Radiantix', 'Bostonic', 'Geekko', 'Eventex', 'Stockpost', 'Silodyne', 'Enersave', 'Perkle', 'Pyramis', 'Accuprint', 'Papricut', 'Pathways', 'Circum', 'Gology', 'Buzzworks', 'Dancerity', 'Zounds', 'Diginetic', 'Snips', 'Chillium', 'Exotechno', 'Accufarm', 'Vidto', 'Signidyne', 'Escenta', 'Sureplex', 'Quarmony', 'Interfind', 'Exoswitch', 'Mondicil', 'Pyramia', 'Digitalus', 'Earthplex', 'Limozen', 'Twiist', 'Tubalum', 'Securia', 'Uni', 'Biospan', 'Zensus', 'Memora'];
@@ -41,6 +43,8 @@ export class SelectMultiComponent {
             this.companies.push({ id: i, name: c });
             this.companies2.push({ id: i, name: c });
         });
+
+        this.selectedCompanyDisabled = [{ id: 0, name: 'Miškas' }, { id: 1, name: 'Žalias' }]
     }
 }
 

diff --git a/src/demo/app/select-search.component.ts b/src/demo/app/select-search.component.ts
@@ -6,7 +6,6 @@ import { Component, EventEmitter } from '@angular/core';
         <label>Search in label text (default)</label>
         <ng-select [items]="companies"
                    labelKey="name"
-                   valueKey="this"
                    [(ngModel)]="selectedCompany">
         </ng-select>
         <p>
@@ -16,7 +15,6 @@ import { Component, EventEmitter } from '@angular/core';
         <label>Search using custom filter handler (search for Rooforia)</label>
         <ng-select [items]="filteredCompanies2"
                    labelKey="name"
-                   valueKey="this"
                    [typeahead]="customFilter"
                    [(ngModel)]="selectedCompany2">
         </ng-select>