diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 09829b82adb0..5ccb2e5d5906 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -292,8 +292,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
}
private _setTriggerValue(value: any): void {
- this._element.nativeElement.value =
- this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
+ const toDisplay = this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
+ this._element.nativeElement.value = toDisplay || '';
}
/**
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 26c609fc1c7d..f3cc906d2d60 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -5,7 +5,7 @@ import {MdAutocompleteModule, MdAutocompleteTrigger} from './index';
import {OverlayContainer} from '../core/overlay/overlay-container';
import {MdInputModule} from '../input/index';
import {Dir, LayoutDirection} from '../core/rtl/dir';
-import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Subscription} from 'rxjs/Subscription';
import {ENTER, DOWN_ARROW, SPACE, UP_ARROW} from '../core/keyboard/keycodes';
import {MdOption} from '../core/option/option';
@@ -26,9 +26,14 @@ describe('MdAutocomplete', () => {
dir = 'ltr';
TestBed.configureTestingModule({
imports: [
- MdAutocompleteModule.forRoot(), MdInputModule.forRoot(), ReactiveFormsModule
+ MdAutocompleteModule.forRoot(), MdInputModule.forRoot(), FormsModule, ReactiveFormsModule
+ ],
+ declarations: [
+ SimpleAutocomplete,
+ AutocompleteWithoutForms,
+ NgIfAutocomplete,
+ AutocompleteWithNgModel
],
- declarations: [SimpleAutocomplete, AutocompleteWithoutForms, NgIfAutocomplete],
providers: [
{provide: OverlayContainer, useFactory: () => {
overlayContainerElement = document.createElement('div');
@@ -863,6 +868,18 @@ describe('MdAutocomplete', () => {
}).not.toThrowError();
});
+ it('should display an empty input when the value is undefined with ngModel', async(() => {
+ const fixture = TestBed.createComponent(AutocompleteWithNgModel);
+
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(input.value).toBe('');
+ });
+ }));
+
it('should work when input is wrapped in ngIf', () => {
const fixture = TestBed.createComponent(NgIfAutocomplete);
fixture.detectChanges();
@@ -997,6 +1014,36 @@ class AutocompleteWithoutForms {
}
+
+@Component({
+ template: `
+
+
+
+
+
+
+ {{ state }}
+
+
+ `
+})
+class AutocompleteWithNgModel {
+ filteredStates: any[];
+ selectedState: string;
+ states = ['New York', 'Washington', 'Oregon'];
+
+ constructor() {
+ this.filteredStates = this.states.slice();
+ }
+
+ onInput(value: any) {
+ this.filteredStates = this.states.filter(s => new RegExp(value, 'gi').test(s));
+ }
+
+}
+
/**
* Focuses an input, sets its value and dispatches
* the `input` event, simulating the user typing.