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

Created on 16 Nov 2016 · 10Comments · Source: angular/components

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.

Source

danny-swimmer

👍2

Most helpful comment

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

bgauvey on 24 Nov 2016

👍3

All 10 comments

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

jelbourn on 18 Nov 2016

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

bgauvey on 24 Nov 2016

👍3

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.