angular - 从焦点上的 Material 输入和离开焦点时移除标签

Question

我正在使用带占位符的 Angular Material 输入。当我专注于字段时，我会删除占位符，但如果我离开焦点并且字段为空，我会看到转换动画，我也想删除它。在此图像中，占位符必须在字段为空时出现。

在这张图片中，我留下了焦点:

<mat-form-field class="al-subscribe-form-field">
        <input formControlName="email" matInput type="email">
        <mat-placeholder  class="al-placeholder">{{'SHARED.ENTER_YOUR_EMAIL' | translate}}</mat-placeholder>
</mat-form-field>

.mat-focused .al-placeholder, .mat-form-field-invalid .al-placeholder {
    display: none!important;
}

Answer 1

尝试添加floatLabel='never'

<mat-form-field floatLabel='never' class="al-subscribe-form-field" >
    ...
</mat-form-field>