在单击时打开和关闭 mat-form-field matInput 的下划线答案

【问题标题】：Toggle underline for mat-form-field matInput on and off on click在单击时打开和关闭 mat-form-field matInput 的下划线
【发布时间】：2021-04-05 09:51:26
【问题描述】：

是否可以使用 CSS 或后端 Typescript 打开和关闭 mat-form-field 的 matInput 的下划线？

我看到了诸如 this question 之类的东西，这表明它可以使用 css 删除，例如：

::ng-deep .mat-form-field-underline {
    display: none;
}

但我不确定这是否可以在 [ngClass] 中实现切换它？

问题还表明它可以通过编程方式完成，但是我不知道这是否可逆，而且我使用的材料设计前缀为 mat 而不是 md...

@ViewChild('input') input: MdInputDirective;

ngOnInit(){
  this.input.underlineRef.nativeElement.className = null;
}

这是我的blitz

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

您可以根据组件中的某些条件应用/删除一个类（例如使用布尔值）。请参阅 [ngClass] 或 [class.class-name] 了解用法。

以上评论可以帮助你一半.... 下划线类由角度材料自动设置。

<div class="mat-form-field-underline"><span class="mat-form-field-ripple"></span></div>

此问题的解决方法是在 mat-form-field 中添加一个类

<mat-form-field [ngClass]="{'form-field--read':field.readOnly }" > <input matInput .........  /> </mat-form-field>

并将其与 scss/css 结合起来：

  ::ng-deep .form-field--read .mat-form-field-underline {
    display: none;
}

【讨论】：

【解决方案2】：

试试这个方法

::ng-deep .mat-form-field-underline {
    display: none;
}

【讨论】：

是的，这是允许删除下划线的 CSS 类，但我的问题是如何使用这样的东西来打开和关闭线？是否可以在[ngClass] 中使用::ng-deep .mat-form-field-underline？

【解决方案3】：

将以下代码添加到您的 mat-form-field：

[ngClass]="{'mat-form-field-invalid': errorExists}"

errorExists 是一个布尔值，表示当前是否存在错误。如果您已经有一个错误变量，您可以执行类似“error !=”的操作，而不是 errorExists

【讨论】：

【解决方案4】：

您可以根据组件中的某些条件应用/删除一个类（例如使用布尔值）。用法见[ngClass]或[class.class-name]。

https://stackblitz.com/edit/angular-9w1w4b

【讨论】：

你有没有机会提供一个更具体的例子？
您可以使用给定的类更新 css。请参阅 blitz 中的 CSS 文件。我在应用one-class 时添加了下划线。
我正在从 HTML 传递硬编码字符串 green 和 red，您可以更新条件是组件本身并在 [ngClass] 中检查它们