Angular 2 Material 中的占位符和标签答案

【问题标题】：Placeholder and label in Angular 2 MaterialAngular 2 Material 中的占位符和标签
【发布时间】：2017-06-02 10:05:27
【问题描述】：

我想设置一个在用户键入时消失的占位符，以及一个始终浮动在输入上方的输入标签，就像在这个 codepen 中一样： https://codepen.io/anon/pen/QjypdO

但我不知道如何使用最新版本的角度材料来实现它。

更新

由于 Angular Material 尚不支持它，我实现了一个模拟所需行为的解决方法：

HTML

<md-input-container [ngClass]="{ 'zip': zipPlaceholderActive }">
    <input mdInput [placeholder]="Zip" [ngModel]="zipValue" (focus)="removeDefaultValue()">
</md-input-container>

打字稿：

removeDefaultValue() {
    if (this.zipPlaceholderActive) {
        this.zipValue = '';
    }
    this.zipPlaceholderActive = false;
}

CSS：

.zip .mat-input-element {
    color: #999;
}

【问题讨论】：

对于 AngularJS，请使用 angularjs，因为 angular 是为 Angular 版本 2+ 保留的。这会让想要帮助你的人感到困惑
嘿，您使用的是 Angular 还是 AngularJS？您混淆了两者的语法
我正在使用 Angular 4。我不想混淆它，但我发现的唯一示例是这个 AngularJS 示例。但我想使用 Angular
floatPlaceholder 是 Angular 特有的，而 md-placeholder 和 class="md-no-float" 存在于 AngularJS 中。这是floatPlaceholder 的工作示例：plnkr.co/edit/HtLlTiN32RmhQ0Z1B10n?p=preview
这不是我想要达到的。我不希望在输入中写入一个值，而是一个占位符和一个标签（但“标签”在角度材料中被称为占位符，所以它很混乱）

标签： angular angular-material2

【解决方案1】：

这是我最接近占位符的 Codepen 示例。此示例也处理键盘事件，因此如果用户擦除所有字符，占位符会返回，如果用户再次开始输入，则占位符会消失。

ts:

  food: string = "Enter a food name";
  showPlaceholder: boolean = true;

  removePlaceholder(){
    if(this.food == "Enter a food name"){
      this.food = "";
      this.showPlaceholder = false;
    }
  }

  viewPlaceholder(){
    if(this.food == ""){
      this.food = "Enter a food name";
      this.showPlaceholder = true;  
    }

  }

html:

<md-input-container>
  <input mdInput placeholder="Favorite food" 
         [(ngModel)]="food"
         [ngClass]="{'gray-text': showPlaceholder}"
         (focus)="removePlaceholder()"
         (keydown)="removePlaceholder()"
         (blur)="viewPlaceholder()"
         (keyup)="viewPlaceholder()">
</md-input-container>

css:

.gray-text{
  color: #999999;
}

Plunkerdemo

【讨论】：

【解决方案2】：

如果你只是想在字段为空且没有焦点的情况下替换占位符（所以当它实际位于占位符应该在的位置时），可以通过CSS来实现：

:host /deep/ :not(.mat-focused) .mat-input-placeholder.mat-empty {
    color: transparent;
}
:host /deep/ :not(.mat-focused) .mat-input-placeholder.mat-empty::before {
    content: "My custom placeholder";
    color: black;
}

如果你可以使用 CSS 变量，你可以从标记中传递占位符值：

HTML：

<mat-input-container custom-placeholder="true" style="--custom-placeholder-text: 'Type terms…';">
    <input type="text" matInput name="searchText" placeholder="Query">
</mat-input-container>

SCSS：

:host /deep/ :not(.mat-focused)[custom-placeholder] {
    .mat-input-placeholder.mat-empty {
        color: transparent;
        &::before {
            content: var(--custom-placeholder-text);
            color: black;
        }
    }
}

【讨论】：