Html 在单击时打开和关闭垫子表单字段matInput的下划线

是否可以使用CSS或后端Typescript打开或关闭mat表单字段的matInput下划线

我看到了一些东西，如，它表明可以使用css删除它，例如：

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

但我不确定这是否可以在

[ngClass]

切换它

这个问题还表明它可以通过编程实现，但是我不知道这是否是可逆的，而且我使用的是前缀为

mat

的材料设计，而不是

md

@ViewChild('input') input: MdInputDirective;

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

这是我的

试试这边

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

---

您可以根据组件中的某些条件应用/删除类（例如使用布尔值）。有关用法，请参见

[ngClass]

或

[class.class name]

---

您可以根据组件中的某些条件应用/删除类 （例如，使用布尔值）。有关详细信息，请参见[ngClass]或[class.class name] 用法

上面的评论可以帮你一半。。。。 下划线类由角度材质自动设置

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

---

将以下代码添加到mat表单字段：

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

---

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

errorExists

是的，这是一个CSS类，可以删除下划线，但我的问题是如何使用类似的操作来打开和关闭行？是否可以在

[ngClass]

中使用

：：ng deep.mat表单字段下划线

？是否有可能提供更具体的示例？您可以使用给定的类更新css。请参阅blitz中的CSS文件。当应用

一个类时，我添加了下划线。我正在从HTML传递硬编码字符串
绿色
和
红色
，您可以更新组件本身的条件，并在
[ngClass]
  ::ng-deep .form-field--read .mat-form-field-underline {
    display: none;
}

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