diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts index 335acfaf3c40..9839cec44472 100644 --- a/src/lib/input/input-container.spec.ts +++ b/src/lib/input/input-container.spec.ts @@ -1,9 +1,9 @@ import {async, TestBed, inject} from '@angular/core/testing'; import {Component} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms'; import {By} from '@angular/platform-browser'; import {MdInputModule} from './input'; -import {MdInputContainer} from './input-container'; +import {MdInputContainer, MdInputDirective} from './input-container'; import {Platform} from '../core/platform/platform'; import {PlatformModule} from '../core/platform/index'; import { @@ -41,7 +41,8 @@ describe('MdInputContainer', function () { MdInputContainerZeroTestController, MdTextareaWithBindings, MdInputContainerWithDisabled, - MdInputContainerMissingMdInputTestController + MdInputContainerMissingMdInputTestController, + MdInputContainerWithFormControl ], }); @@ -293,6 +294,21 @@ describe('MdInputContainer', function () { const textarea: HTMLTextAreaElement = fixture.nativeElement.querySelector('textarea'); expect(textarea).not.toBeNull(); }); + + it('should update the value when using FormControl.setValue', () => { + let fixture = TestBed.createComponent(MdInputContainerWithFormControl); + fixture.detectChanges(); + + let input = fixture.debugElement.query(By.directive(MdInputDirective)) + .injector.get(MdInputDirective) as MdInputDirective; + + expect(input.value).toBeFalsy(); + + fixture.componentInstance.formControl.setValue('something'); + + expect(input.value).toBe('something'); + }); + }); @Component({ @@ -446,6 +462,13 @@ class MdTextareaWithBindings { }) class MdInputContainerMissingMdInputTestController {} +@Component({ + template: `` +}) +class MdInputContainerWithFormControl { + formControl = new FormControl(); +} + /** * Gets a RegExp used to detect an angular wrapped error message. * See https://github.com/angular/angular/issues/8348 diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index 37d18f2ff0db..42b7301b6dde 100644 --- a/src/lib/input/input-container.ts +++ b/src/lib/input/input-container.ts @@ -145,16 +145,14 @@ export class MdInputDirective implements AfterContentInit { @Optional() public _ngControl: NgControl) { // Force setter to be called in case id was not specified. this.id = this.id; - - if (this._ngControl && this._ngControl.valueChanges) { - this._ngControl.valueChanges.subscribe((value) => { - this.value = value; - }); - } } ngAfterContentInit() { this.value = this._elementRef.nativeElement.value; + + if (this._ngControl && this._ngControl.valueChanges) { + this._ngControl.valueChanges.subscribe(value => this.value = value); + } } /** Focuses the input element. */