代码之家 › 专栏 › 技术社区 › physicsboy

单击时打开和关闭mat表单字段matInput的下划线

angular-material angular css html

0

physicsboy · 技术社区 · 7 年前

我见过一些像 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;
}

2 回复 | 直到 7 年前

1

0

Lalji Tadhani 7 年前

试试这个办法

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

2

0

Max Sassen 6 年前

您可以根据某个条件在类中应用/删除组件 (例如使用布尔值)。见[ngClass]或[类。类-名称]用于用法。

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

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

这个问题的一个解决方法是在 mat窗体字段

<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;
}

3

-1

Sachin Gupta 7 年前

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