diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 1e328390e6be..fbc743ba0ba0 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -267,6 +267,14 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
this._onTouched = fn;
}
+ /**
+ * Disables the input. Implemented as a part of `ControlValueAccessor`.
+ * @param isDisabled Whether the component should be disabled.
+ */
+ setDisabledState(isDisabled: boolean) {
+ this._element.nativeElement.disabled = isDisabled;
+ }
+
_handleKeydown(event: KeyboardEvent): void {
const keyCode = event.keyCode;
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index b9139a06ce99..78d78bde42d9 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -596,6 +596,22 @@ describe('MatAutocomplete', () => {
.toBe(true, `Expected control to become touched on blur.`);
});
+ it('should disable the input when used with a value accessor and without `matInput`', () => {
+ fixture.destroy();
+ TestBed.resetTestingModule();
+
+ const plainFixture = createComponent(PlainAutocompleteInputWithFormControl);
+ plainFixture.detectChanges();
+ input = plainFixture.nativeElement.querySelector('input');
+
+ expect(input.disabled).toBe(false);
+
+ plainFixture.componentInstance.formControl.disable();
+ plainFixture.detectChanges();
+
+ expect(input.disabled).toBe(true);
+ });
+
});
describe('keyboard events', () => {
@@ -1906,3 +1922,14 @@ class AutocompleteWithSelectEvent {
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
@ViewChild(MatAutocomplete) autocomplete: MatAutocomplete;
}
+
+
+@Component({
+ template: `
+
+
+ `
+})
+export class PlainAutocompleteInputWithFormControl {
+ formControl = new FormControl();
+}