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

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

我看过像 this question 这样的东西,它显示它可以 removed 与css如下:

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

但我不确定这是否可以在 [ngClass] 内实现切换呢?

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

@ViewChild('input') input: MdInputDirective;

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

这是我的blitz

回答(2)

2 years ago

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

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

2 years ago

试试这种方式

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