Trigger change detection when user enters text.

Author: devversion

src/lib/input/input-container.spec.ts

@@ -45,6 +45,7 @@ describe('MdInputContainer', function () {
         MdInputContainerWithType,
         MdInputContainerWithValueBinding,
         MdInputContainerWithFormControl,
+        MdInputContainerWithStaticPlaceholder,
         MdInputContainerMissingMdInputTestController
       ],
     });
@@ -132,6 +133,26 @@ describe('MdInputContainer', function () {
     expect(el.classList.contains('md-empty')).toBe(false, 'should not be empty');
   }));
 
+  it('should update the placeholder when input entered', async(() => {
+    let fixture = TestBed.createComponent(MdInputContainerWithStaticPlaceholder);
+    fixture.detectChanges();
+
+    let inputEl = fixture.debugElement.query(By.css('input'));
+    let labelEl = fixture.debugElement.query(By.css('label')).nativeElement;
+
+    expect(labelEl.classList).toContain('md-empty');
+    expect(labelEl.classList).not.toContain('md-float');
+
+    // Update the value of the input.
+    inputEl.nativeElement.value = 'Text';
+
+    // Fake behavior of the `(input)` event which should trigger a change detection.
+    fixture.detectChanges();
+
+    expect(labelEl.classList).not.toContain('md-empty');
+    expect(labelEl.classList).not.toContain('md-float');
+  }));
+
   it('should not be empty when the value set before view init', async(() => {
     let fixture = TestBed.createComponent(MdInputContainerWithValueBinding);
     fixture.detectChanges();
@@ -529,6 +550,15 @@ class MdInputContainerWithValueBinding {
   value: string = 'Initial';
 }
 
+@Component({
+  template: `
+    <md-input-container [floatingPlaceholder]="false">
+      <input md-input placeholder="Label">
+    </md-input-container>
+  `
+})
+class MdInputContainerWithStaticPlaceholder {}
+
 @Component({
   template: `
     <md-input-container>

src/lib/input/input-container.ts

@@ -83,6 +83,7 @@ export class MdHint {
     '[required]': 'required',
     '(blur)': '_onBlur()',
     '(focus)': '_onFocus()',
+    '(input)': '_onInput()'
   }
 })
 export class MdInputDirective {
@@ -174,6 +175,11 @@ export class MdInputDirective {
 
   _onBlur() { this.focused = false; }
 
+  _onInput() {
+    // This is a noop function and is used to let Angular recognize the changes
+    // to the input element while typing. Listening to the `input` event is similar to NgControls.
+  }
+
   /** Make sure the input is a supported type. */
   private _validateType() {
     if (MD_INPUT_INVALID_TYPES.indexOf(this._type) !== -1) {