如果使用 formControlName，角度材質 2 占位符會重疊值

Question

我將我的應用程序（使用 angular-cli）更新為 angular/material (2.0.0-beta.11) 和 angular (4.4.4)。 然而，現在材料輸入字段中的每個占位符都與值重疊，如果它與 formControlName（反應形式）一起提供。
直接使用 value 屬性，占位符可以正常工作。

在我的表單代碼下方：

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

結果：

在服務器上（我仍然使用 angular 4.1.2），表單被正確呈現。
我檢查了文檔和 realease 注釋，但找不到任何可能指向我解決方案的注釋或錯誤。 有沒有人知道這種行為和可能的解決方案（除了降級軟件包）？

Answer 1

這個問題困擾了我好幾天，所以我通過觸發點擊事件做了一個解決方法。 這個答案假定當你點擊輸入時占位符向上移動：

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(); 
    }

模糊用於隨后移除焦點，但如果您想保持焦點，則無法將其移除。希望這可以在某些時候幫助某人。 我正在使用：

角度/材料= 2.0.0-beta.12
角4 = 4.2.4

Answer 2

您可以使用 floatField 屬性來控制 Label 的行為！ 在您的情況下，您可以在鍵入時執行此操作以隱藏標簽：

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

Answer 3

我將材料升級到版本 2.0.0-beta.12 並將所有“md”前綴更改為“mat”，這似乎解決了問題。 使用 md 而不是新的 mat 組件可能存在一些沖突。

（15.10.2017 - 從我這里的評論作為結束問題的答案）