[disabled] not working for input attached to md-autocomplete

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When setting [disabled]=“true” on input, the input should be disabled. <input mdInput placeholder="input md-autocomplete" [disabled]="true" [mdAutocomplete]="auto" [formControl]="stateCtrl">

What is the current behavior?

Input is still enabled and user can change it. The browser console shows below warning message:.

It looks like you’re using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid ‘changed after checked’ errors.

Example: form = new FormGroup({ first: new FormControl({value: ‘Nancy’, disabled: true}, Validators.required), last: new FormControl(‘Drew’, Validators.required) });

What are the steps to reproduce?

Plunker https://plnkr.co/edit/uQlms4Ok7fMgBNoaTUrO?p=preview

What is the use-case or motivation for changing an existing behavior?

For the dumb user like me, this should work out of box.

Which versions of Angular, Material, OS, browsers are affected?

"@angular/core": "^4.0.3",
"@angular/forms": "^4.0.3",
"@angular/material": "^2.0.0-beta.3",

Is there anything else we should know?

[kamok]

How does one disable the autocomplete if they use template driven forms? My app has a component where I must use template driven forms. The example in the docs uses a FormControl. However, my input uses ngModel instead.

What I’ve tried: @ViewChild(‘employerModel’) employerModel: NgModel; this.employerModel.control.disable();

I expected this to work, since the example does control.disable().

My component does not have any formControl binding in it.

[meritor]

Thanks @DevVersion for the information. Got a workaround after reading #2667. Use myFormControl.enable() myFormControl…disable() function Here is the example https://plnkr.co/edit/T4Lywt7dj9RROcMn1ZQL?p=preview