md-input displays value on top of placeholder if disabled and value is bound from a component class property

[marcoross]

Bug, feature request, or proposal:

md-input displays value on top of placeholder if disabled and value is bound from a component class property

What is the expected behavior?

The placeholder shall be smaller and displayed above the value

What is the current behavior?

The placeholder is displayed with a larger font size behind the value

What are the steps to reproduce?

See the company input field in this plunk:
https://plnkr.co/edit/J9e4gAkC5jIEdTbyUbqd?p=preview

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

Want to use placeholder values on non-editable fields in a form to have the same name->value pattern for all items in the form.

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

@angular/material 2.0.0-beta.1
@angular 2.4.2

Is there anything else we should know?

[wadenweh]

Same problem here.

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

    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",

[marcoross]

Workaround: The issue does not occur when the [ngModel] binding is used instead of [value]

[zigfry]

This bug occurs even if the field is not disabled. I am having the same issue using reactive forms when I set the value outside of the onInit method (for example after fetching data from API).

The end result is that the md-empty class still remains on the input component's label, even though a value is set. I am using this method to 'patch' a single control's value:

//THIS UPDATES THE FORM CONTROL VALUE - BUT NOT THE LABEL'S MD-EMPTY CLASS
(<FormGroup>this.myForm).patchValue(myData, { onlySelf: true });   

where this.myForm is a FormGroup and myData is an object that has properties named the same as the controls in myForm.

See this plunk: https://plnkr.co/edit/nDrY5UhWSGe3jMtgGuHb?p=preview

[mmalerba]

This has been fixed in master, just needs a release

[zigfry]

Excellent! I just worked that out with a new plunk which works with the master version:
http://plnkr.co/edit/ExCcGDx8GEypp4XFAAqW?p=preview

Do you know when the master will be released?

[marcoross]

Excellent, that's great news! Thank you!

[leonardovff]

When then next released? @mmalerba

[mmalerba]

We're working on it. There's a couple important changes we want to get in first, can't give an exact date yet, soon though

[leonardovff]

I used this temporarily:
let el = document.querySelectorAll('input[formcontrolname]'); for(let indice = el.length; indice>0; indice--){ el[indice-1].dispatchEvent(new Event('input')); }

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