input place holder is hovering input value

[maciejtreder]

Bug

What is the expected behavior?

Placeholder should be deisplayed above input

What is the current behavior?

Placeholder is hovering value:

What are the steps to reproduce?

<input md-input placeholder="Count" disabled="true" [value]="getCount(product) | async" />

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

OSX - Safari, Chrome (I did not check other browsers)
angular - 2.4.3
material - 2.0.0-beta.1

Is there anything else we should know?

Workaround:
To workaround this problem, add native value to input.

<input md-input placeholder="Count" disabled="true" value=" "  [value]="getCount(product) | async" />

[oraum]

I was facing the same problem using a formcontrol on the input. While debugging I found out that the MdInputDirectives value is never changed. Therefore it always appears as empty and the md-empty class is added to the placeholder. So maybe there is a problem with the ControllValueAccessor.
My dirty fix was not adding a native value element but programmatically overwriting the value of the MdInputContainer._mdInputChild

[baszczewski]

This affects me to with formControl and formControlName. With this bug material controls are unusable with Angular Forms.

[RicardoVaranda]

I've created a simple plunkr to show the issue:

https://plnkr.co/edit/Uz09iLIyYgvgN3M4cSJ1?p=preview

@jelbourn @kara Would one of you guys mind taking a look at this 🙊

[RicardoVaranda]

Actually it seems like this PR already addresses this issue:

#2455

The PR is merged but it doesn't seem to be released yet.

This can be closed.

[KennethGeris]

Is there something similar like this for textarea?

[kara]

This is fixed in master, so closing. Should be out with our next release.

[imVinayPandya]

@kara i am using dynamic form and i am setting value of that form from the code. but it seems that placeholder is not working properly. see this link for screenshot http://awesomescreenshot.com/06d68g233f.

and also i won't be able to set value for select control.

my code is like

// initializing form in constructor
private _initProjectForm() {
    this._projectForm = this._fb.group({
      project_name: ['', Validators.required],
      project_website: ['', Validators.compose([GlobalValidator.urlFormat])],
      support_email: ['', Validators.compose([Validators.required, GlobalValidator.mailFormat])],
      project_category: ['', Validators.required],
      description: ['']
    })
  }

// setting value in ngOninit() after getting value from server.
this._projectForm.patchValue({
          project_name: response.data[0].project_name,
          project_website: response.data[0].project_website,
          support_email: response.data[0].support_email,
          project_category: response.data[0].project_category,
          description: response.data[0].description
        });

[kara]

@imVinayPandya What version of Material are you using? We haven't released the fix yet publicly, so unless you are working off of a master build, I wouldn't expect it to be updated. Can you repro your case on plunkr?

[imVinayPandya]

I am using "@angular/material": "2.0.0-beta.1", my package.json is look like following. i am using teradata covalent angular 2 component which is using material 2 component inside it.

{
  "name": "private-project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/platform-server": "2.4.1",
    "@angular/router": "3.4.1",
    "@covalent/core": "0.10.2",
    "@covalent/charts": "0.10.2",
    "@covalent/dynamic-forms": "0.10.2",
    "@covalent/highlight": "0.10.2",
    "@covalent/http": "0.10.2",
    "@covalent/markdown": "0.10.2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.6.0",
    "rxjs": "^5.0.1",
    "showdown": "1.4.2",
    "zone.js": "^0.7.2",
    "@swimlane/ngx-charts": "^3.1.2",
    "moment": "^2.17.1",
    "d3": "^4.4.0",

    "ts-helpers": "^1.1.1"

  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.1",
    "@types/hammerjs": "2.0.30",
    "@types/jasmine": "2.2.31",
    "@types/node": "6.0.34",
    "@types/selenium-webdriver": "2.53.36",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "0.0.26",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "karma-firefox-launcher": "1.0.0",
    "karma-phantomjs-launcher": "1.0.1",
    "node-sass": "3.8.0",
    "phantomjs-prebuilt": "2.1.7",
    "protractor": "4.0.5",
    "sass-loader": "^4.0.2",
    "ts-node": "1.2.1",
    "tslint": "3.14.0",
    "typescript": "2.0.10"
  }
}

i am not doing any fancy thing, i am just patching dynamic form value. i have also tried this._projectForm.setValue({}).

[kara]

@imVinayPandya Since you are using our last release, the fix would not be in it. It's only in master. Once we make our next public release, you should be able to upgrade to a version that has the fix.

[imVinayPandya]

Thank you @kara. and thanks to your angular 2 form videos. I have learned so many things from your videos.

[RicardoVaranda]

@kara Once again thanks for all the hard work, is there an ETA for the next release?

[victornoel]

@kara I'm using latest beta and this bug hasn't been fixed apparently… I'm experiencing the same thing as @imVinayPandya