mat-select Not Working Properly

Question

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 a mat-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 with matInput shows both the input and the mat-select together, making it look weird. Any way around this?

score 10 · Answer 1 · answered Oct 26 '17 at 14:57

10

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

answered Oct 26 '17 at 14:57

StephaneM

4,779
1
16
33

As I mentioned at the bottom of my post, adding a mat-form-field gives me the error. – FiringBlanks Oct 26 '17 at 23:35
2

Turns out I forgot to import MatSelectModule in my app.module.ts :p – FiringBlanks Oct 27 '17 at 01:24

score 8 · Accepted Answer · edited Apr 09 '19 at 14:21

8

Silly me, I forgot to import MatSelectModule in my app.module.ts.

edited Apr 09 '19 at 14:21

Marty

146
1
13

answered Oct 27 '17 at 01:25

FiringBlanks

1,998
4
32
48

score 2 · Answer 3 · edited Apr 09 '19 at 14:22

2

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..

edited Apr 09 '19 at 14:22

nircraft

8,242
5
30
46

answered May 13 '18 at 13:06

nsk

1,413
5
24
34

mat-select Not Working Properly

3 Answers3

Linked