CODEWITHSUNDEEP
htmlcssangularangular-material
physicsboy
physicsboy

Reputation: 6316

Toggle underline for mat-form-field matInput on and off on click

Is it possible to toggle the underline for a matInput of a mat-form-field on and off using either CSS or backend Typescript?

I have seen something such as this question which shows it can be removed with css such as:

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

But I am unsure whether this can be implemented within an [ngClass] to toggle it?

The question also shows that it can be done programatically, however I am unaware of if this is reversible, and also I am using material design with the prefix mat rather than md...

@ViewChild('input') input: MdInputDirective;

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

Here is my blitz

Upvotes: 2

Views: 4719

Answers (4)

Vamshi Gujju
Vamshi Gujju

Reputation: 1

Add the following code to your mat-form-field:

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

errorExists is a boolean that represents whether there is currently an error or not. If you already have a variable for the error, you can do something like "error != " instead of errorExists

Upvotes: 0

Max Sassen
Max Sassen

Reputation: 680

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.

the above comment can help you half.... the underline class is set automaticaly by angular material. 

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

A workaround of this issue is to add a class in the mat-form-field 

<mat-form-field [ngClass]="{'form-field--read':field.readOnly }" > <input matInput .........  /> </mat-form-field>

and combine it with scss/css:

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

Upvotes: 2

Sachin Gupta
Sachin Gupta

Reputation: 5301

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.

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

Upvotes: -1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

try this way 

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

Upvotes: 0

Related Questions