For questions about the Angular Material
Questions tagged [mat-form-field]
111 questions
9
votes
3 answers
Angular 12 Material shows cannot read property errorstate undefined of MatFormField
This is the simple HTML that I have written for single page web app
Frequently Asked Questions
Himanshu Grover
- 91
- 1
- 1
- 3
7
votes
3 answers
Problem mat-form-field outline background-color on hover
I have a CSS problem when I pass my mouse over a mat-form-field.
To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the mat-form-field.
.mat-form-field-appearance-outline…
Quentin
- 1,865
- 2
- 24
- 40
5
votes
2 answers
matSuffix not working when wrapped inside of matFormField
I am currently trying to write a global datepicker. For that I created a component observing the given example from angular (https://material.angular.io/guide/creating-a-custom-form-field-control). I only want to outsource a part of the whole…
Julia
- 137
- 3
- 13
4
votes
1 answer
mat-form-field outline border color
It looks like the border color of mat-form-field has been updated
The v15 is black
The v12 is grey
Is it possible to add an option to change the based color?
RBC
- 55
- 5
4
votes
0 answers
Can I add mat-icon and mat-label in single line under mat-form-field
I'm trying to add a tooltip icon beside the mat-label of a form field.
Is there a way to do that
Date
Anuj kumar
- 57
- 5
4
votes
1 answer
Mat-form-field - Styling when out of focus and with text in mat-input
How can I make it so that the out of focus styles don't apply when there is text inside the mat-input while simultaneously being out of focus?
I want to keep these styles when out of focus and with text:
But right now this is what I'm getting when…
Manuel Brás
- 413
- 7
- 21
3
votes
1 answer
Is there a way to remove border from an angular mat-form-field when its disabled?
I am trying to remove borders from a mat-form-field when the field is disabled but I've tried all the options I could find online but nothing seems to removing the borders from the div
Here is my code:
Nick Div
- 5,338
- 12
- 65
- 127
3
votes
2 answers
Angular Mat-form-field placeholder color
I have a form with an input in a mat-form-field. It includes placeholder but I don't know how to set placeholder text color.
When I've not focused previously the input, the placeholder color is grey:
When input get focused then it turns…
Pedro Ramírez Pérez
- 113
- 4
- 15
2
votes
1 answer
angular material calendar not showing properly
this is the html code i wrote
Enter a date range
Amine Ben Selem
- 21
- 5
2
votes
1 answer
Angular mat-form-field input & label
I use an angular material component to make a form, so I use mat-form-field.
I would like to have the label on the left and a text input field on the right. How can I do this? In the example on the official doc it is not possible to do…
heliot truste
- 45
- 1
- 6
2
votes
1 answer
Reusable Angular Material mat-chip-list input with email validation
I need a reusable mat-chip-list input, which knows the following: can type anything in the input, but only valid email addresses can be added to the chip list. If the input has an invalid email in it and user presses ENTER, COMMA or TAB, then the…
Szandra
- 31
- 4
2
votes
2 answers
Angular Mat-Form Causing Web Page to Crash Without Error Code
I am building an Angular application that has been working fine up until I added mat--form-field to build a multi-option drop down. For some reason, the web page crashes whenever the mat-form-field block is added to the code. I have tried commenting…
TiredFullStacker
- 35
- 4
2
votes
1 answer
How to remove Mat-form-field-wrapper from Mat-form-field?
i am using Angular mat-form-field and after css change to make it look like mat-chip, i want to get rid of this outer box (mat-form-field-wrapper).
…
Aditya0033
- 117
- 2
- 11
2
votes
1 answer
Angular Material: mat-select multiple default value for object selection using reactive forms
I am creating a form using reactive forms and angular material mat-select with multiple selection enabled.
I have a list of objects to be loaded in the mat select and want to pre select some items in that list by default.
default selection is…
empirestate
- 21
- 1
- 2
2
votes
1 answer
Angular Material mat-form-field conditional appearance
This seemed like something simple but for some reason I cant get this to work. So, I want the appearance of the mat-form-field to change based on some condition, for example, if the filed is disabled it should be none and if it is enabled it should…
Ravid Goldenberg
- 2,119
- 4
- 39
- 59