fix(select): support use inside a custom value accessor (angular#2704)

Fixes angular#2609
kara · Jan 20, 2017 · 4a84cb4 · 4a84cb4
1 parent d8bd3da
commit 4a84cb4
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -6,7 +6,9 @@ import {OverlayContainer} from '../core/overlay/overlay-container';
 import {MdSelect} from './select';
 import {MdOption} from '../core/option/option';
 import {Dir} from '../core/rtl/dir';
-import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule
+} from '@angular/forms';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 describe('MdSelect', () => {
@@ -22,7 +24,9 @@ describe('MdSelect', () => {
         ManySelects,
         NgIfSelect,
         SelectInitWithoutOptions,
-        SelectWithChangeEvent
+        SelectWithChangeEvent,
+        CustomSelectAccessor,
+        CompWithCustomSelect
       ],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
@@ -539,6 +543,20 @@ describe('MdSelect', () => {
 
   });
 
+  describe('misc forms', () => {
+    it('should support use inside a custom value accessor', () => {
+      const fixture = TestBed.createComponent(CompWithCustomSelect);
+      spyOn(fixture.componentInstance.customAccessor, 'writeValue');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.customAccessor.select._control)
+          .toBe(null, 'Expected md-select NOT to inherit control from parent value accessor.');
+      expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
+    });
+
+  });
+
+
   describe('animations', () => {
     let fixture: ComponentFixture<BasicSelect>;
     let trigger: HTMLElement;
@@ -1379,6 +1397,43 @@ class SelectInitWithoutOptions {
   }
 }
 
+@Component({
+  selector: 'custom-select-accessor',
+  template: `
+    <md-select></md-select>
+  `,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: CustomSelectAccessor,
+    multi: true
+  }]
+})
+class CustomSelectAccessor implements ControlValueAccessor {
+  @ViewChild(MdSelect) select: MdSelect;
+
+  writeValue(val: any): void {}
+  registerOnChange(fn: (val: any) => void): void {}
+  registerOnTouched(fn: Function): void {}
+}
+
+@Component({
+  selector: 'comp-with-custom-select',
+  template: `
+    <custom-select-accessor [formControl]="ctrl">
+    </custom-select-accessor>
+  `,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: CustomSelectAccessor,
+    multi: true
+  }]
+})
+class CompWithCustomSelect {
+  ctrl = new FormControl('initial value');
+  @ViewChild(CustomSelectAccessor) customAccessor: CustomSelectAccessor;
+}
+
+
 /**
  * TODO: Move this to core testing utility until Angular has event faking
  * support.

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -10,6 +10,7 @@ import {
   Output,
   QueryList,
   Renderer,
+  Self,
   ViewEncapsulation,
   ViewChild,
 } from '@angular/core';
@@ -232,7 +233,7 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
 
   constructor(private _element: ElementRef, private _renderer: Renderer,
               private _viewportRuler: ViewportRuler, @Optional() private _dir: Dir,
-              @Optional() public _control: NgControl) {
+              @Self() @Optional() public _control: NgControl) {
     if (this._control) {
       this._control.valueAccessor = this;
     }