如果使用formControlName，Angular material 2占位符将重叠值-Java 学习之路

我将我的应用程序（使用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>

结果：

enter image description here

在服务器上（我仍使用angular 4.1.2），表单被正确呈现 .
我检查了文档和realease说明，但我找不到任何可能指向解决方案的注释或错误 . 是否有人知道这种行为和可能的解决方案（除了降级包）？

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

回复于 2024-04-20T06:35:01+08:00

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

1 回答

相关问题