Angular material 2 placeholder overlaps value if using formControlName

user_706293 0
Viewed 2136

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:

enter image description here

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)?

angular-material2 angular-reactive-forms angular typescript
3 Answers

You can use the floatField attribute to control the behaviour of your Label so !! in your case you can do thisto hide the Label while typing : 

 <md-form-field floatLabel="never">
       <input mdInput placeholder="Favorite food" formControlName="placeName">
 </md-form-field floatLabel="never">
user_102121580

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.

(15.10.2017 - From my comment here as answer to close the question)

user_7062930
Related