mat-select Not Working Properly
Solution 1
Silly me, I forgot to import MatSelectModule in my app.module.ts
.
Solution 2
The message says that your select must be in a mat-form-field, not in the same mat-form-field as your input. Try this:
<mat-form-field>
<input matInput placeholder="Name" #NameInput>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="How Many?">
<mat-option>One</mat-option>
<mat-option>Two</mat-option>
<mat-option>Three</mat-option>
<mat-option>Four</mat-option>
<mat-option>Five</mat-option>
</mat-select>
</mat-form-field>
In the doc that's how they do: https://material.angular.io/components/form-field/overview
Solution 3
I mistakenly put placeHolder [in camelCase] instead of placeholder
and it just ignored this!!!
It was very hard to find! but once I changed to placeholder
I was able to see it. Just wanted to share in case you may also have run into..
FiringBlanks
Updated on April 10, 2020Comments
-
FiringBlanks about 4 years
The
mat-select
element is acting funny. See below.Code
<mat-form-field> <input matInput placeholder="Name" #NameInput> </mat-form-field> <mat-select placeholder="How Many?"> <mat-option>One</mat-option> <mat-option>Two</mat-option> <mat-option>Three</mat-option> <mat-option>Four</mat-option> <mat-option>Five</mat-option> </mat-select>
Results
Wrapping the
mat-select
in amat-form-field
gives me the following error:mat-form-field must contain a MatFormFieldControl. Did you forget to add matInput to the native input or textarea element?
However, including an
input
withmatInput
shows both theinput
and themat-select
together, making it look weird. Any way around this?