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

[meritor]

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?

[shaunak1111]

Looks like a bug to me. Any thoughts by official material team?

[devversion]

I can reproduce the issue. My first guess is that it relates to the custom ControlValueAccessor on the autocomplete. I will try to confirm if that's the case later.

[devversion]

This is kind of related to https://github.com/angular/material2/issues/2667. The input directive keeps setting the disabled state to false.

[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

[mmalerba]

Seems to be WAI for same reason @kara mentions here: https://github.com/angular/material2/issues/2667#issuecomment-275280698

[meritor]

Hi All,

Not quite happy with solution here.
I am using material just as it's very easy to use and I don't have to learn internal of Angular. And Material is designed for that, isn't it?
Now, as a dumb user, I really want this to be working. User don't want to understand the technical issue inside it. Material provides a very fine layer over Angular, and should be able to handle such issues.
I can propose three solutions here:
Solution 1: fix this
Solution 2: provide alternative for input tag in html to disable md-autocomplete
Solution 3: document how to disable md-autocomplete

[willshowell]

@meritor I think the autocomplete component is unique in that it recommends using the reactive form paradigm, since that's the easiest way to map from valueChanges. You could certainly use template-driven forms to operate the autocomplete, but it's clunkier.

I suspect that for plenty of new Angular devs, this could be their first introduction to reactive forms and it won't be clear that you should not mix the two paradigms. That said, I don't think this is much of a technical issue - it simply requires digging more in the "Advanced" section of the official Angular docs.

For these reasons, I believe your first two solutions are well outside the scope of Material. However documentation of the form of

The easiest way to manage md-autocomplete is through reactive forms. If you are unfamiliar with how to manipulate values, validators, or disabled properties, check out the Angular documentation on the subject.

could be beneficial to users who run into the issue your encountered.

[mmalerba]

@kara do you want to add any additional documentation about this issue to autocomplete?

[kara]

If someone wants to submit a PR with @willshowell's suggestion, sounds good to me. I don't think we should say much more about forms here - way too broad of an issue for us to tackle in the docs here.

[meritor]

Thanks @willshowell , this makes to me now.
Thanks @DevVersion , @mmalerba , @willshowell and @kara for your time and effort to investigate this issue.

[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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}