Menu
I have input element in Angular Material:
<md-input-container> <input type="text" mdInput placeholder=""> </md-input-container> When input has focus it displays underline. How to hide or remove that?
Seem I need to set null for underlineRef?
302
As you can see in the above example, we can easily hide and display content using *ngIf and button (click) methods. If we want to hide the Display Data button when the content displays the Hide Data button when the data is hidden, we can also use the same concept on buttons.
If you are using [ (ngModel)] directive to control your form input fields, then you can clear it by setting an empty string ( ' ') to the ngModel control property. We can also clear it by adding a reference to the input field and access that element inside the app component by using @ViewChild () decorator.
We can also clear it by adding a reference to the input field and access that element inside the app component by using @ViewChild () decorator. #name is the reference added to the above input field.
If your open your browser console, you would see "ERROR Error: Input type "hidden" isn't supported by matInput." and if you tried to submit the form with type="hidden", then the form will be corrupt, only displaying part of the form values. A simple way of going around this issue is by using a CSS class on the mat-form-field tag:
I was playing a bit with the appearance property of mat-form-field and found that if you put a "none" value (or any other unsupported value), you will get clear input.
The code:
<mat-form-field appearance="none"> <mat-label>"None" form field</mat-label> <input matInput placeholder="Placeholder"> </mat-form-field> StackBlitz demo (edited from the official angular demo).
The original example can be found here: Form field appearance variants.
I admit, this is a little bit of a hack.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
