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），表单被正确呈现。
我检查了文档和发行说明，但我找不到任何可能指向我的注释或错误解决方案。是否有人知道这种行为和可能的解决方案（除了降级包之外）？

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组件可能存在一些冲突。

（2017年10月15日-从我在此处的评论作为关闭问题的答案）

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

3 个答案: