Mat-form-field

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 class，因此直接将其应用于 mat-form-field 将不起作用。但是，我们应该能够将 classes 应用于将匹配 'focused' 样式的包装器容器。

div.mat-form-field-outline 嵌套在 mat-form-field-appearance-outline 和 mat-focused 元素 classes
mat-label元素嵌套在元素中时有'focused'规则 mat-form-field 和 mat-focused classes.

因此我们可以向容器提供 mat-form-field-appearance-outline 和 mat-form-field classes 并根据表单字段值切换 mat-focused class。

<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

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

Mat-form-field - Styling when out of focus and with text in mat-input

angular-material

angular