切换mat-form-field matInput的下划线单击时打开和关闭

Question

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

我已经看到诸如 this question 之类的东西，它表明可以使用诸如以下的css 移除 ：

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

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

问题还显示可以通过编程方式完成，但是我不知道这是否可逆，而且我正在使用带有前缀mat而不是md的材料设计... < / p>

@ViewChild('input') input: MdInputDirective;

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

这是我的blitz

Answer 1

尝试这种方式

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

Answer 2

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

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

Answer 3

  

您可以根据组件中的某些条件来申请/删除课程   （例如，使用布尔值）。请参阅[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;
}

Answer 4

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

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

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