typescript - Angular material 2 platshållare överlappar värde om formControlName används

Jag uppdaterade min applikation (med angular-cli) till angular/material (2.0.0-beta.11) och angular (4.4.4). Men nu överlappar varje platshållare i materialets inmatningsfält värdet, om detta tillhandahålls med formControlName (reaktiva formulär).
Om man använder attributet value direkt fungerar platshållaren korrekt.

Nedan min formkod:

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

Resultatet:

På servern (där jag fortfarande använder Angular 4.1.2) renderas formuläret korrekt.
Jag kontrollerade dokumentationen och versionsnoteringarna, men jag kunde inte hitta någon anteckning eller bugg som kan peka mig mot lösningen. Är någon medveten om detta beteende och en möjlig lösning (förutom att nedgradera paketen)?

Svar #1

Det här problemet har irriterat mig i flera dagar, så jag gjorde en tillfällig lösning genom att trigga ett klickhändelse. Det här svaret antar att när du klickar på inputen så flyttar sig platshållaren upp:

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 används för att ta bort fokus efteråt men du kan inte ta bort det om du vill behålla fokus. Hoppas detta hjälper någon vid något tillfälle. Jag använder:

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

Svar #2

Du kan använda attributet floatField för att kontrollera beteendet hos din Label, så !! i ditt fall kan du göra detta för att dölja Label medan du skriver:

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