angular-material - 如何使用 Angular Material mat-form-field，但使用普通占位符

Question

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

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

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

标签： 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首先添加该类会更好，但直到有人弄清楚这一点，这将不得不这样做。