如果输入值存在，角度材质输入占位符颜色会发生变化答案

【问题标题】：Angular material input placeholder color change if input value exists如果输入值存在，角度材质输入占位符颜色会发生变化
【发布时间】：2018-02-19 02:11:45
【问题描述】：

我使用 Angular 5 和材料 5.2。如果字段不为空，我想更改输入字段占位符颜色。当我专注于字段时，我可以更改颜色，但如果值存在，则无法更改颜色。

我试过下面的代码。它改变了所有字段为空和非空字段。我只想更改非空字段的颜色。请给我建议

::ng-deep .mat-form-field-placeholder{
 color:#2196F3
 }
 ::ng-deep .mat-focused .mat-form-field-placeholder{
  color:#2196F3;
   }
 ::ng-deep .mat-form-field-underline .mat-form-field-ripple{
    background-color:#2196F3;
    }
 ::ng-deep .mat-form-field-underline{
 background-color:#2196F3;
  }

【问题讨论】：

如果字段为空，则只有占位符。您可以更改占位符颜色和字段值。

标签： angular angular-material2

【解决方案1】：

经过一番研究，找到了以下解决方案。我加了

 <mat-label style="blue">UserName</mat-label>

浮动标签是当控件不包含任何文本时显示在表单域控件顶部的文本标签。默认情况下，当文本出现时，浮动标签浮动在表单域控件上方。可以通过 mat-label 元素、在表单控件上设置 placeholder 属性或使用 mat-placeholder 元素来定义表单字段的标签。如果有多个冲突值（例如占位符和标签），则 mat-label 将优先，并且仅当没有值时才会显示占位符。

【讨论】：