feat(select): Implement compareWith so custom comparators can be used.

Fixes Issue #2250 and Issue #2785. Users can supply a custom comparator that tests for equality. The comparator can be changed dynamically at which point the selection may change. If the comparator throws an exception, it will log a warning in developer mode but will be swallowed in production mode.

Author: ppham27

src/demo-app/select/select-demo.html

@@ -95,5 +95,32 @@
     </md-card>
   </div>
 
+  <div *ngIf="showSelect">
+    <md-card>
+      <md-card-subtitle>compareWith</md-card-subtitle>
+      <md-card-content>
+        <md-select placeholder="Drink" [color]="drinksTheme"
+                   [ngModel]="currentDrinkObject"
+                   (ngModelChange)="setDrinkObjectByCopy($event)"
+                   [required]="drinkObjectRequired"
+                   [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
+                   #drinkObjectControl="ngModel">
+          <md-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
+            {{ drink.viewValue }}
+          </md-option>
+        </md-select>
+        <p> Value: {{ currentDrinkObject | json }} </p>
+        <p> Touched: {{ drinkObjectControl.touched }} </p>
+        <p> Dirty: {{ drinkObjectControl.dirty }} </p>
+        <p> Status: {{ drinkObjectControl.control?.status }} </p>
+        <p> Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }} </p>
+
+        <button md-button (click)="drinkObjectRequired=!drinkObjectRequired">TOGGLE REQUIRED</button>
+        <button md-button (click)="compareByValue=!compareByValue">TOGGLE COMPARE BY VALUE</button>
+        <button md-button (click)="drinkObjectControl.reset()">RESET</button>
+      </md-card-content>
+    </md-card>
+  </div>
+
 </div>
 <div style="height: 500px">This div is for testing scrolled selects.</div>

src/demo-app/select/select-demo.ts

@@ -10,17 +10,20 @@ import {MdSelectChange} from '@angular/material';
 })
 export class SelectDemo {
   drinksRequired = false;
+  drinkObjectRequired = false;
   pokemonRequired = false;
   drinksDisabled = false;
   pokemonDisabled = false;
   showSelect = false;
   currentDrink: string;
+  currentDrinkObject: {} = {value: 'tea-5', viewValue: 'Tea'};
   currentPokemon: string[];
   latestChangeEvent: MdSelectChange;
   floatPlaceholder: string = 'auto';
   foodControl = new FormControl('pizza-1');
   drinksTheme = 'primary';
   pokemonTheme = 'primary';
+  compareByValue = true;
 
   foods = [
     {value: 'steak-0', viewValue: 'Steak'},
@@ -63,4 +66,20 @@ export class SelectDemo {
   setPokemonValue() {
     this.currentPokemon = ['eevee-4', 'psyduck-6'];
   }
+
+  setDrinkObjectByCopy(selectedDrink: {}) {
+    if (selectedDrink) {
+      this.currentDrinkObject = Object.assign({}, selectedDrink);
+    } else {
+      this.currentDrinkObject = undefined;
+    }
+  }
+
+  compareDrinkObjectsByValue(d1: {value: string}, d2: {value: string}) {
+    return d1 && d2 && d1.value === d2.value;
+  }
+
+  compareByReference(o1: any, o2: any) {
+    return o1 === o2;
+  }
 }

src/lib/select/select.spec.ts

@@ -56,7 +56,8 @@ describe('MdSelect', () => {
         SelectEarlyAccessSibling,
         BasicSelectInitiallyHidden,
         BasicSelectNoPlaceholder,
-        BasicSelectWithTheming
+        BasicSelectWithTheming,
+        NgModelCompareWithSelect,
       ],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
@@ -1995,6 +1996,74 @@ describe('MdSelect', () => {
 
   });
 
+  describe('compareWith behavior', () => {
+    let fixture: ComponentFixture<NgModelCompareWithSelect>;
+    let instance: NgModelCompareWithSelect;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(NgModelCompareWithSelect);
+      instance = fixture.componentInstance;
+      spyOn(instance, 'compareByReference').and.callThrough();
+      fixture.detectChanges();
+    }));
+
+    const testCompareByReferenceBehavior = () => {
+      it('should initialize with no selection despite having a value', () => {
+        expect(instance.selectedFood.value).toBe('pizza-1');
+        expect(instance.select.selected).toBeUndefined();
+      });
+
+      it('should not update the selection when changing the value', async(() => {
+        instance.options.first._selectViaInteraction();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(instance.selectedFood.value).toEqual('steak-0');
+          expect(instance.select.selected).toBeUndefined();
+        });
+      }));
+    };
+
+    it('should not use the comparator', () => {
+      expect(instance.compareByReference).not.toHaveBeenCalled();
+    });
+
+    testCompareByReferenceBehavior();
+
+    describe('when comparing by reference', () => {
+      beforeEach(async(() => {
+        instance.useCompareByReference();
+        fixture.detectChanges();
+      }));
+
+      it('should use the comparator', () => {
+        expect(instance.compareByReference).toHaveBeenCalled();
+      });
+
+      testCompareByReferenceBehavior();
+    });
+
+    describe('when comparing by value', () => {
+      beforeEach(async(() => {
+        instance.useCompareByValue();
+        fixture.detectChanges();
+      }));
+
+      it('should have a selection', () => {
+        const selectedOption = instance.select.selected as MdOption;
+        expect(selectedOption.value.value).toEqual('pizza-1');
+      });
+
+      it('should update when making a new selection', async(() => {
+        instance.options.last._selectViaInteraction();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          const selectedOption = instance.select.selected as MdOption;
+          expect(instance.selectedFood.value).toEqual('tacos-2');
+          expect(selectedOption.value.value).toEqual('tacos-2');
+        });
+      }));
+    });
+  });
 });
 
 
@@ -2339,3 +2408,37 @@ class BasicSelectWithTheming {
   @ViewChild(MdSelect) select: MdSelect;
   theme: string;
 }
+
+@Component({
+  selector: 'ng-model-compare-with',
+  template: `
+    <md-select [ngModel]="selectedFood" (ngModelChange)="setFoodByCopy($event)"
+               [compareWith]="comparator">
+      <md-option *ngFor="let food of foods" [value]="food">{{ food.viewValue }}</md-option>
+    </md-select>
+  `
+})
+class NgModelCompareWithSelect {
+  foods: ({value: string, viewValue: string})[] = [
+    { value: 'steak-0', viewValue: 'Steak' },
+    { value: 'pizza-1', viewValue: 'Pizza' },
+    { value: 'tacos-2', viewValue: 'Tacos' },
+  ];
+  selectedFood: {value: string, viewValue: string} = { value: 'pizza-1', viewValue: 'Pizza' };
+  comparator: (f1: any, f2: any) => boolean;
+
+  @ViewChild(MdSelect) select: MdSelect;
+  @ViewChildren(MdOption) options: QueryList<MdOption>;
+
+  useCompareByValue() { this.comparator = this.compareByValue; }
+
+  useCompareByReference() { this.comparator = this.compareByReference; }
+
+  compareByValue(f1: any, f2: any) { return f1 && f2 && f1.value === f2.value; }
+
+  compareByReference(f1: any, f2: any) { return f1 === f2; }
+
+  setFoodByCopy(newValue: {value: string, viewValue: string}) {
+    this.selectedFood = Object.assign({}, newValue);
+  }
+}

src/lib/select/select.ts

@@ -16,6 +16,7 @@ import {
   ChangeDetectorRef,
   Attribute,
   OnInit,
+  isDevMode,
 } from '@angular/core';
 import {MdOption, MdOptionSelectionChange} from '../core/option/option';
 import {ENTER, SPACE, UP_ARROW, DOWN_ARROW} from '../core/keyboard/keycodes';
@@ -150,6 +151,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
   /** Whether the component is in multiple selection mode. */
   private _multiple: boolean = false;
 
+  /** Comparison function to specify which option is displayed. Defaults to object equality. */
+  private _compareWith: ((o1: any, o2: any) => boolean) | null = null;
+
   /** Deals with the selection logic. */
   _selectionModel: SelectionModel<MdOption>;
 
@@ -262,6 +266,16 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
     this._multiple = coerceBooleanProperty(value);
   }
 
+  @Input()
+  get compareWith() { return this._compareWith; }
+  set compareWith(fn: (o1: any, o2: any) => boolean) {
+    if (this._selectionModel) {
+      // A different comparator means the selection could change.
+      this._initializeSelection();
+    }
+    this._compareWith = fn;
+  }
+
   /** Whether to float the placeholder text. */
   @Input()
   get floatPlaceholder(): MdSelectFloatPlaceholderType { return this._floatPlaceholder; }
@@ -333,11 +347,7 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
     this._changeSubscription = this.options.changes.startWith(null).subscribe(() => {
       this._resetOptions();
 
-      if (this._control) {
-        // Defer setting the value in order to avoid the "Expression
-        // has changed after it was checked" errors from Angular.
-        Promise.resolve(null).then(() => this._setSelectionByValue(this._control.value));
-      }
+      this._initializeSelection();
     });
   }
 
@@ -533,6 +543,14 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
     scrollContainer.scrollTop = this._scrollTop;
   }
 
+  private _initializeSelection(): void {
+    if (this._control) {
+      // Defer setting the value in order to avoid the "Expression
+      // has changed after it was checked" errors from Angular.
+      Promise.resolve(null).then(() => this._setSelectionByValue(this._control.value));
+    }
+  }
+
   /**
    * Sets the selected option based on a value. If no option can be
    * found with the designated value, the select trigger is cleared.
@@ -566,8 +584,19 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
    * @returns Option that has the corresponding value.
    */
   private _selectValue(value: any): MdOption {
-    let optionsArray = this.options.toArray();
-    let correspondingOption = optionsArray.find(option => option.value === value);
+    const optionsArray = this.options.toArray();
+    const correspondingOption = this._compareWith ?
+      optionsArray.find((option: MdOption) => {
+        try {
+          return this._compareWith(option.value,  value);
+        } catch (error) {
+          if (isDevMode()) {
+            // Notify developers of errors in their comparator.
+            console.warn(error);
+          }
+          return false;
+        }
+      }) : optionsArray.find(option => option.value === value);
 
     if (correspondingOption) {
       correspondingOption.select();