diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 46ba1602e2d3..85ba07f5d36b 100644 --- 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: () => { @@ -517,6 +521,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; let trigger: HTMLElement; @@ -1357,6 +1375,43 @@ class SelectInitWithoutOptions { } } +@Component({ + selector: 'custom-select-accessor', + template: ` + + `, + 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: ` + + + `, + 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 index c82cc0fcecbe..50714b83f45e 100644 --- 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; }