md-input input text is not grayed-out when disabled

[danny-swimmer]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When the md-input is disabled, the input text should be grayed-out. The expected behavior is documented in Google design here:
https://material.google.com/components/text-fields.html#text-fields-labels

What is the current behavior?

Input text is not grayed-out.

What are the steps to reproduce?

Please refer to this plunk: http://plnkr.co/edit/fzZY5ASZ2vQlhOci8z9P
Note that the input text is the same intensity, whether or not it's disabled.
The underline, however, does correctly change to a dotted line when disabled.

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

User can't tell whether the input is disabled or not.

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

Angular 2.1.0
Material 2.0.0-alpha.10
Linux
Chrome

Is there anything else we should know?

No.

[jelbourn]

Will likely be obsolete by <md-input> refactor.

[bgauvey]

very similar issue using reactive forms.

using this form code the md-input is not disabled. Adding the disabled keyword, angular forms generates a warning.

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

[pmulac]

The same is happening with md-checkbox. When I disable a checkbox like this:

<md-checkbox formControlName="myControl" disabled=true></md-checkbox>

I receive this warning:

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)
      });

However, initializing a FormControl with { value: 'anyValue', disabled: true} doesn't seem to do anything. The input ignores the disabled property and remains enabled.

[mmalerba]

fixed by #2513

[pantonis]

I am using 2.0.0-beta.8 and I still have this problem

[mmalerba]

@pantonis It appears to be working correctly, did you install a theme? https://material.angular.io/guide/theming

[pantonis]

No nothing. I have to call enable(), disable() to make it work

[mmalerba]

I think the disabled styles live in the theme css, so that's probably why it doesn't look right.

[pantonis]

?? :)

[angular-automatic-lock-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.}