Angular material 2 个占位符与值重叠（如果使用 formControlName）

Question

我将我的应用程序（使用 angular-cli）更新为 angular/material (2.0.0-beta.11) 和 angular (4.4.4)。但是，现在 material 输入字段中的每个占位符都与值重叠，如果这是由 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）表单正确呈现。
我检查了文档和发行说明，但找不到任何说明或发布的错误可能会指出我的解决方案。有没有人知道这种行为和可能的解决方案（除了降级软件包）？

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

Blur 用于之后移除焦点，但如果您想保持焦点，则不能将其移除。希望这在某些时候对某人有所帮助。我正在使用：

angular/material = 2.0.0-beta.12
angular 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

我将 material 升级到版本 2.0.0-beta.12 并将所有 "md" 前缀更改为 "mat"，这似乎解决了问题。可能在使用 md 而不是新的 mat 组件时存在一些冲突。

（2017 年 10 月 15 日 - 从我在这里的评论作为结束问题的答案）

Angular material 2 个占位符与值重叠（如果使用 formControlName）

Angular material 2 placeholder overlaps value if using formControlName

typescript

angular-material2

angular

angular-reactive-forms