Mat-select does not work properly

Question

The element mat-selectis acting funny. See below.

the 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 mat-selectin mat-form-fieldgives me the following error:

The mat-form field must contain MatFormFieldControl. Did you forget to add matInput to the original input element or textarea?

However, including inputwith matInputshows both input, and mat-selecttogether, making it look strange. How to get around this?

Answer 1

Stupid me, I forgot to import MatSelectModule in mine app.module.ts.

Answer 2

The message says that your choice should be in the mat form field, and not in the same mat form field as your input. Try the following:

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

, : https://material.angular.io/components/form-field/overview

Answer 3

I mistakenly placed the place H older [in camelCase] ​​instead placeholderand he just ignored it !!!

It was very hard to find! but as soon as I changed placeholderI could see it. Just wanted to share in case you might also come across ..