Components: 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

[uredkar]

Here is a picture for the same issue Angular2, and Material2. Latest. The issue happens if the data is populated by code, then once you click on the screen the display looks normal change detection does not help the look of the screen.

[victornoel]

@uredkar that's exactly what I am experiencing, thanks!

[hardikpatel-1]

i was also experiencing the same issue.

[dhirenpratap]

facing same issue in 2.0.0-beta.8

[NqCompiler]

in my case it worked with
setTimeout(() => { changeDetectorRef.detectChanges(); })
in the constructor
the PR for this issue is already labeled as "merge ready" -> https://github.com/angular/material2/pull/6141

[mariohmol]

That still an issue in beta10 =(

If i click in the one input in the form.. it fixes all the inputs in that form

... my workaround for now is calling click event for the input

[Alexei000]

It is still an issue in beta12. One possible workaround with declarative only changed is the following:

<form>
    <mat-form-field>
        <span>{{!i.value ? "" : "&nbsp;"}}</span>
        <input matInput placeholder="Favorite food" #i value="Sushi">
    </mat-form-field>
</form>

The placeholder displays correctly if input has a value before it. However, the nice animation is lost.

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