CODEWITHSUNDEEP
angularangular-material
AndyKing
AndyKing

Reputation: 251

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

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?

Upvotes: 0

Views: 853

Answers (1)

Kasunaz
Kasunaz

Reputation: 593

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>

Upvotes: 1

Related Questions