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

Question

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

我见过类似 this question 的东西 这表明可以使用 css 删除，例如:

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

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

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

@ViewChild('input') input: MdInputDirective;

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

这是我的 blitz

Answer 1

You can apply/remove a class based on some condition in your component (use boolean for example). see [ngClass] or [class.class-name] for usage.

以上评论能帮到你一半....下划线类由 Angular Material 自动设置。

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

此问题的解决方法是在 ma​​t-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;
}