diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index 335acfaf3c40..72d8688744d6 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,6 +41,8 @@ describe('MdInputContainer', function () {
MdInputContainerZeroTestController,
MdTextareaWithBindings,
MdInputContainerWithDisabled,
+ MdInputContainerWithValueBinding,
+ MdInputContainerWithFormControl,
MdInputContainerMissingMdInputTestController
],
});
@@ -128,6 +130,20 @@ describe('MdInputContainer', function () {
expect(el.classList.contains('md-empty')).toBe(false, 'should not be empty');
}));
+ it('should not be empty when the value set before view init', async(() => {
+ let fixture = TestBed.createComponent(MdInputContainerWithValueBinding);
+ fixture.detectChanges();
+
+ let placeholderEl = fixture.debugElement.query(By.css('.md-input-placeholder')).nativeElement;
+
+ expect(placeholderEl.classList).not.toContain('md-empty');
+
+ fixture.componentInstance.value = '';
+ fixture.detectChanges();
+
+ expect(placeholderEl.classList).toContain('md-empty');
+ }));
+
it('should not treat the number 0 as empty', async(() => {
let fixture = TestBed.createComponent(MdInputContainerZeroTestController);
fixture.detectChanges();
@@ -141,6 +157,20 @@ describe('MdInputContainer', function () {
});
}));
+ 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');
+ });
+
it('should add id', () => {
let fixture = TestBed.createComponent(MdInputContainerTextTestController);
fixture.detectChanges();
@@ -326,6 +356,13 @@ class MdInputContainerPlaceholderElementTestComponent {
placeholder: string = 'Default Placeholder';
}
+@Component({
+ template: ``
+})
+class MdInputContainerWithFormControl {
+ formControl = new FormControl();
+}
+
@Component({
template: ``
})
@@ -429,6 +466,16 @@ class MdInputContainerZeroTestController {
value = 0;
}
+@Component({
+ template: `
+
+
+ `
+})
+class MdInputContainerWithValueBinding {
+ value: string = 'Initial';
+}
+
@Component({
template: `
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index 37d18f2ff0db..d770677c4a25 100644
--- a/src/lib/input/input-container.ts
+++ b/src/lib/input/input-container.ts
@@ -74,10 +74,10 @@ export class MdHint {
'[id]': 'id',
'(blur)': '_onBlur()',
'(focus)': '_onFocus()',
- '(input)': '_onInput()',
}
})
-export class MdInputDirective implements AfterContentInit {
+export class MdInputDirective {
+
/** Whether the element is disabled. */
@Input()
get disabled() { return this._disabled; }
@@ -116,8 +116,9 @@ export class MdInputDirective implements AfterContentInit {
}
private _type = 'text';
- /** The element's value. */
- value: any;
+ /** The input element's value. */
+ get value() { return this._elementRef.nativeElement.value; }
+ set value(value: string) { this._elementRef.nativeElement.value = value; }
/**
* Emits an event when the placeholder changes so that the `md-input-container` can re-validate.
@@ -143,18 +144,9 @@ export class MdInputDirective implements AfterContentInit {
constructor(private _elementRef: ElementRef,
private _renderer: Renderer,
@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;
}
/** Focuses the input element. */
@@ -164,8 +156,6 @@ export class MdInputDirective implements AfterContentInit {
_onBlur() { this.focused = false; }
- _onInput() { this.value = this._elementRef.nativeElement.value; }
-
/** Make sure the input is a supported type. */
private _validateType() {
if (MD_INPUT_INVALID_TYPES.indexOf(this._type) != -1) {