angular - Mat-form-field - 失焦时的样式和 mat-input 中的文本

Question

当 mat-input 中有文本同时处于失焦状态时，如何才能使失焦样式不适用？

我想在失去焦点和文本时保留这些样式:

但现在这就是我在失去焦点和文本时得到的结果:

此外，这是没有文本且没有焦点时该字段的外观:

我目前的风格:

.mat-form-field-appearance-outline .mat-form-field-outline {
    background-color: #FFFFFF66;
    border-radius: 10em;
    color: transparent;
    opacity: 0.5;
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: white;
    background-color: transparent;
}

提前谢谢你。

Answer 1

我在评论中看到您注意到 Angular 删除了 mat-focused 类，因此将其直接应用于 mat-form-field 将不起作用。但是，我们应该能够将类应用于将匹配“聚焦”样式的包装器容器。

• div.mat-form-field-outline 嵌套在具有 mat-form-field-appearance-outline 和 mat-focused 的元素类

• mat-label 元素嵌套在元素中时具有“聚焦”规则使用 mat-form-field 和 mat-focused 类。

因此我们可以向容器提供 mat-form-field-appearance-outline 和 mat-form-field 类并切换 mat-focused 基于表单字段值的类。

<p>
  <span
    class="mat-form-field mat-form-field-appearance-outline"
    [ngClass]="{'mat-focused': field.value}"
  >
    <mat-form-field appearance="outline">
      <mat-label>Outline form field</mat-label>
      <input #field matInput placeholder="Placeholder" />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
      <mat-hint>Hint</mat-hint>
    </mat-form-field>
  </span>
</p>

https://stackblitz.com/edit/angular-ckvs4z?file=src/app/form-field-appearance-example.html