Mat-Button Error: mat-form-field must contain a MatFormFieldControl

Question

I have the following markup:

<div fxLayout="row" fxLayoutAlign="start start">
        <mat-form-field class="company-filter-form">
            <mat-select placeholder="Actionss">
                <mat-option [value]=""></mat-option>
                <mat-option value="Delete">Delete</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="company-filter-form">
            <button mat-flat-button color="primary">Apply</button>
        </mat-form-field>

I then get this rendering error:

ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.js:109)

All modules are imported MatButtonModule, MatFormFieldModule & MatInputModule.

How can i add a mat-button to the same row as a mat-select?

Buttons inside of the mat-form-field element are invalid - seeing that you're intending for the button to be a "submit" button, you could try including a type attribute set to submit. — Edric
MatFormFIeld is used for additionnal behavior on form tags and expects to wrap form tags. That's why you get this error on mat-form-field wrapping the button. — Gérôme Grignon

Kasunaz Kasunaz · Accepted Answer · 2020-05-19T14:08:49

Do not wrap the buttons with mat-form-field. MatFormField is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages. Instead of mat-form-field, you can put just a div. It will resolve your problem.

    <div class="company-filter-form">
        <button mat-flat-button color="primary">Apply</button>
    </div>

Mat-Button Error: mat-form-field must contain a MatFormFieldControl

1 Answers