如何使用Angular Material mat-form-field，但使用常规占位符

Question

Angular Material表单字段可能非常方便，因为它们会根据周围的字段是选中，为空，还是填充等向周围的元素添加一堆类。我想使用这些类来自定义标签的样式和放置在字段容器中的其他自定义元素（例如：使输入焦点对准标签时更改颜色）。

问题在于Angular Material还添加了许多我不想处理的其他属性，样式和元素。即使我添加了floatLabel="never"和floatPlaceholder="never"，占位符仍会从输入中删除并变成一个标签，该标签相对于整个容器定位。如果我将其他元素放置在mat-form-field元素内（如常规标签），则会弄乱占位符旋转标签的位置，从而使其出现在输入的外部。

有什么方法可以使Angular Material 不将占位符变成标签，而只是将其保留为普通占位符？

Answer 1

因此，我实际上无法正确修复它，但是通过添加样式来撤消Angular添加的样式更改，我得以解决此问题。

mat-form-field.mat-form-field-hide-placeholder .mat-input-element::placeholder{
    color: #ccc !important;
    -webkit-text-fill-color: #ccc !important;
}
mat-form-field.mat-form-field-hide-placeholder .mat-form-field-label-wrapper{
    display: none;
}

如果有一种方法可以避免首先添加.mat-form-field-hide-placeholder类，那就更好了，但是直到有人弄清楚这将是必须这样做的。