Angular material 2 placeholder overlaps value if using formControlName

Question

I updated my application (with angular-cli) to angular/material (2.0.0-beta.11) and angular (4.4.4). However now the every placeholder in the material input fields overlaps the value, if this is provided with formControlName (reactive forms).
Using directly the value attribute, the placeholder works correctly.

Below my form code:

<form novalidate (ngSubmit)="save(formGroup)" [formGroup]="formGroup">
   <md-form-field>
      <input mdInput placeholder="Favorite food" formControlName="placeName">
   </md-form-field>

   <!-- This entry is for test sake -->
   <md-form-field>
      <input mdInput placeholder="Favorite food" value="TEST VALUE">
   </md-form-field>
</form>

The result:

On the server (where I still use angular 4.1.2) the form is correctly rendered.
I checked the documentation and the realease notes, but I could not find any note or bug issued that might point me to the solution. Is anyone aware of this behavior and a possible solution (other than downgrade the packages)?

Could you setup a demo, please? I had that on an input without 'material', but an error on the model was causing the same effect — Vega
@vega: Even removing the class and any other styling (I updated in my question) the result does not change. I tried here: angular-material2-beta-4uytww.stackblitz.io (adding a reactive form) to use an input field with reactive form and it displays correctly. So I will check again whether my packages versions are maybe incompatible. — Francesco
Does adding floatPlaceholder="auto" or floatPlaceholder="never" into <md-form-field> do anything? — shevaroller
Today I upgraded the material to version 2.0.0-beta.12 and changed all "md" prefixes to "mat" and this seems to have fixed the issue. Probably there was some conflicts in using md instead of the new mat components. — Francesco

the_best the_best · Accepted Answer · 2017-12-22T15:24:49

This issue has been bugging me for days, so I did a workaround by triggering a click event. This answer assumes that when you click on input the placeholder moves up:

HTML:

<mat-form-field>
  <input matInput #inputField placeholder="My Input" formControlName="placeName">          
</mat-form-field>

TS:

 @ViewChild('inputField') inputField: ElementRef;

    ngAfterViewInit() {
      setTimeout(x => this.triggerClickEvent(), 50);
    }

    triggerClickEvent() {
      let elem: HTMLElement;
      elem = this.inputField.nativeElement as HTMLElement;
      elem.click();
      elem.blur(); 
    }

Blur is used to remove focus afterward but you can't remove it if you want to keep the focus in. Hope this helps someone at some point. I'm using:

angular/material = 2.0.0-beta.12
angular 4 = 4.2.4

Angular material 2 placeholder overlaps value if using formControlName

3 Answers