angular - 在焦点和离开焦点时从材料输入中删除标签

Question

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

在这张图片中，我离开了焦点：

<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;
}

标签： angularangular-material

Answer 1

尝试添加floatLabel='never'

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