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?

Answer 1

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

Answer 2

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