如果使用formControlName，Angular material 2占位符将重叠值

Question

我将我的应用程序（使用angular-cli）更新为角度/材质（2.0.0-beta.11）和角度（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