Error mat form field must contain a matformfieldcontrol

I had this issue. I imported questions uvdos angular-material MatFormFieldModule at my main module, questions uvdos angular-material but forgot to add MatInputModule to the questions uvdos angular-material imports array, like so:

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

More info here.

Problem 1: MatInputModule Not imported

import MatInputModule and questions uvdos angular-material MatFormFieldModule inside module i.e. questions uvdos angular-material app.module.ts

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

Problem 2: matInput — spellings mistake / forget to add

Be sure to add matInput and it is questions uvdos angular-material case-sensitive.

<mat-form-field>
    <input matInput type="text" />
</mat-form-field>

Problem 3: Invalid *ngIf placement

Check that you don’t have any condition questions uvdos angular-material on input tag that is going to be false questions uvdos angular-material in any case because mat-form-field looks questions uvdos angular-material for matInput inside it. Instead put questions uvdos angular-material *ngIf on mat-form-field tag.

<mat-form-field>
   <input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>

credit to @William Herrmann for pointing questions uvdos angular-material out this problem#3

Problem 4: Still compiler giving ERROR

if angular compiler still giving error questions uvdos angular-material after fixing above given problems then questions uvdos angular-material you must try with restarting the app.

ng serve

Import MatInputModule in your module.ts questions uvdos angular-material file and it will solve the problem.

import { MatInputModule } from '@angular/material/input';

The statement after it is the old questions uvdos angular-material answer.

Unfortunately content projection into questions uvdos angular-material mat-form-field is not supported questions uvdos angular-material yet.
Please track the following github questions uvdos angular-material issue to get the latest news about it.

By now the only solution for you is questions uvdos angular-material either place your content directly into questions uvdos angular-material mat-form-field component or implement a questions uvdos angular-material MatFormFieldControl class thus creating questions uvdos angular-material a custom form field component.

This can also happen if you have a questions uvdos angular-material proper input within a mat-form-field, questions uvdos angular-material but it has a ngIf on it. E.g.:

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

In my case, mat-chip-list is supposed to questions uvdos angular-material «appear» only after its data is loaded. questions uvdos angular-material However, the validation is performed and questions uvdos angular-material mat-form-field complains with

mat-form-field must contain a questions uvdos angular-material MatFormFieldControl

To fix it, the control must be there, so questions uvdos angular-material I have used [hidden]:

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

An alternative solution is proposed by questions uvdos angular-material Mosta: move *ngIf for mat-form-field:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Quoting from the official documentation questions uvdos angular-material here:

Error: mat-form-field must contain a questions uvdos angular-material MatFormFieldControl

This error occurs when you have not questions uvdos angular-material added a form field control to your form questions uvdos angular-material field. If your form field contains a questions uvdos angular-material native <input> or <textarea> questions uvdos angular-material element, make sure you’ve added the questions uvdos angular-material matInput directive to it and have questions uvdos angular-material imported MatInputModule. Other questions uvdos angular-material components that can act as a form field questions uvdos angular-material control include <mat-select>, questions uvdos angular-material <mat-chip-list>, and any custom questions uvdos angular-material form field controls you’ve created.

Learn more about creating a «custom form questions uvdos angular-material field control» here

import {MatInputModule} from '@angular/material/input';



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})

I had this issue too, and I have questions uvdos angular-material <mat-select> element in my questions uvdos angular-material template, when I import the questions uvdos angular-material MatSelectModule into Module, it works, questions uvdos angular-material it doesn’t make sense, but still I hope questions uvdos angular-material it can help you.

import { MatSelectModule } from '@angular/material/select';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
],

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>
    
    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>
    
    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

if anyone is trying to nest a questions uvdos angular-material <mat-radio-group> inside a questions uvdos angular-material <mat-form-field>
like below, you questions uvdos angular-material will get this error

         <mat-form-field>
                <!-- <mat-label>Image Position</mat-label> -->
                <mat-radio-group aria-label="Image Position" [(ngModel)]="section.field_1">
                    <mat-radio-button value="left">Left</mat-radio-button>
                    <mat-radio-button value="right">Right</mat-radio-button>
                </mat-radio-group>
            </mat-form-field>

remove the parent questions uvdos angular-material <mat-form-field> tags

I’m not sure if it could be this simple questions uvdos angular-material but I had the same issue, changing questions uvdos angular-material «mat-input» to «matInput» in the input questions uvdos angular-material field resolved the problem. In your case questions uvdos angular-material I see «matinput» and it’s causing my app questions uvdos angular-material to throw the same error.

<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">

«matinput»

«matInput»

If all of the main code questions uvdos angular-material structure/configuration answers above questions uvdos angular-material don’t solve your issue, here’s one more questions uvdos angular-material thing to check: make sure that you questions uvdos angular-material haven’t in some way invalidated your questions uvdos angular-material <input> tag.

For instance, I received the same questions uvdos angular-material mat-form-field must contain a questions uvdos angular-material MatFormFieldControl error message after questions uvdos angular-material accidentally putting a required questions uvdos angular-material attribute after a self-closing slash /, questions uvdos angular-material which effectively invalidated my questions uvdos angular-material <input/>. In other words, I did questions uvdos angular-material this (see the end of the input tag questions uvdos angular-material attributes):

wrong:

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

right:

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

If you make that mistake or something questions uvdos angular-material else to invalidate your <input>, questions uvdos angular-material then you could get the mat-form-field questions uvdos angular-material must contain a MatFormFieldControl questions uvdos angular-material error. Anyway, this is just one more questions uvdos angular-material thing to look for as you’re debugging.

Angular 9+ …Material 9+

I have noticed 3 mistakes can can give questions uvdos angular-material rise to the same error:

1. Ensure you have imported MatFormFieldModule and MatInputModule in the app.module or the module.ts where your components are being imported(in case of nested modules)
2. When you wrap material buttons or checkbox in mat-form-field. See the list of material components that can be wrapped with mat-form-field mat-form-field
3. When you fail to include matInput in your tag. i.e <input matInput type=»number» step=»0.01″ formControlName=»price» />

I had accidentally removed the matInput questions uvdos angular-material directive from the input field which questions uvdos angular-material caused the same error.

eg.

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

fixed code

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

Unfortunately I can’t just comment on questions uvdos angular-material some already good answers as I don’t questions uvdos angular-material have the SO points yet, however, there questions uvdos angular-material are 3 key modules that you’ll need to questions uvdos angular-material make sure you are importing into your questions uvdos angular-material component’s parent module, aside from questions uvdos angular-material what you have to import into your questions uvdos angular-material component directly. I wanted to briefly questions uvdos angular-material share them and highlight what they do.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

The first two are for Angular Material. questions uvdos angular-material A lot of people new to Angular Material questions uvdos angular-material will instinctively come across one of questions uvdos angular-material these and not realize that building a questions uvdos angular-material form requires both.

So what’s the difference between them?

MatFormFieldModule encompasses all the questions uvdos angular-material different types of form fields that questions uvdos angular-material Angular Material has available. This is questions uvdos angular-material more of a high level module for form questions uvdos angular-material fields in general, whereas the questions uvdos angular-material MatInputModule is specifically for questions uvdos angular-material ‘input’ field types, as opposed to questions uvdos angular-material select boxes, radio buttons, etc.

The third item on the above list is questions uvdos angular-material Angular’s Reactive Forms Module. The questions uvdos angular-material Reactive Forms Module is responsible for questions uvdos angular-material a ton of under-the-hood Angular love. questions uvdos angular-material If you are going to work with Angular, I questions uvdos angular-material highly recommend that you spend some questions uvdos angular-material time reading Angular Docs. They have questions uvdos angular-material all of your answers. Building questions uvdos angular-material applications rarely DOESN’T involve questions uvdos angular-material forms, and more often than not, your questions uvdos angular-material application will involve reactive forms. questions uvdos angular-material For that reason, please take the time questions uvdos angular-material to read these two pages.

Angular Docs: Reactive Forms

Angular Docs: Reactive Forms Module

The first doc ‘Reactive Forms’ will be questions uvdos angular-material your most powerful weapon as you get questions uvdos angular-material started, and the second doc will be your questions uvdos angular-material most power weapon as you get on to more questions uvdos angular-material advanced applications of Angular questions uvdos angular-material Reactive Forms.

Remember, these need to be imported questions uvdos angular-material directly into your component’s module, questions uvdos angular-material not the component you are using them in. questions uvdos angular-material If I remember correctly, in Angular 2, questions uvdos angular-material we imported the entire set of Angular questions uvdos angular-material Material modules in our main app module, questions uvdos angular-material and then imported what we needed in each questions uvdos angular-material of our components directly. The current questions uvdos angular-material method is much more efficient IMO questions uvdos angular-material because we are guaranteed to import the questions uvdos angular-material entire set of Angular Material modules questions uvdos angular-material if we only use a few of them.

I hope this provides a bit more insight questions uvdos angular-material into building forms with Angular questions uvdos angular-material Material.

The same error can occur if you have a questions uvdos angular-material mat slide within a mat from field as the questions uvdos angular-material only element
in my case I had

 <mat-form-field>
    <mat-slide-toggle [(ngModel)]="myvar">
       Some Text
     </mat-slide-toggle>
 </mat-form-field>

This might happen if you had several questions uvdos angular-material attributes within the questions uvdos angular-material <mat-form-field>
Simple solution questions uvdos angular-material was to move the slide toggle to the root

New updated MatInput Module import is:

import {MatInputModule} from '@angular/material/input';

As per Angular Materials API

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

don’t forget to add at first of questions uvdos angular-material <tabe></table>

 <mat-form-field>
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Helium" #input>
      </mat-form-field>

don’t forget to add at last of questions uvdos angular-material <tabe></table>

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
   No data matching the filter "{{input.value}}"
</td>
</tr>

I had the problem occuring in one of my questions uvdos angular-material Karma tests

As most answers already pointed at, questions uvdos angular-material missing modules can cause problems and questions uvdos angular-material they must be reimported in the Karma questions uvdos angular-material TestBed as well. Also, it seems like we questions uvdos angular-material also need to import questions uvdos angular-material BrowserAnimationsModule to make questions uvdos angular-material everything work.

In my code below I have commented some questions uvdos angular-material modules that may not be useful for you, questions uvdos angular-material but the other 4 imports should questions uvdos angular-material definitely help !

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EventFormComponent ],
      imports: [
        # HttpClientTestingModule,
        # RouterTestingModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        BrowserAnimationsModule,
        # TranslateModule.forRoot(),
      ],
    })
    .compileComponents();
  }));

In my case I changed this:

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

to this:

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

Adding the matInput directive to the questions uvdos angular-material input tag was what fixed this error for questions uvdos angular-material me.

MatRadioModule won’t work inside questions uvdos angular-material MatFormField.
The docs say

This error occurs when you have not questions uvdos angular-material added a form field control to your
questions uvdos angular-material form field. If your form field contains questions uvdos angular-material a native or
element, make sure questions uvdos angular-material you’ve added the matInput directive to questions uvdos angular-material it and have
imported MatInputModule. questions uvdos angular-material Other components that can act as a form questions uvdos angular-material field
control include < questions uvdos angular-material mat-select>, < mat-chip-list>, questions uvdos angular-material and any custom form
field controls questions uvdos angular-material you’ve created.

In my case, one of my closing questions uvdos angular-material parenthesis for «onChanges()» were questions uvdos angular-material missed on the input element and thus the questions uvdos angular-material input element was apparently not being questions uvdos angular-material rendered at all:

<input mat-menu-item 
      matInput type="text" 
      [formControl]="myFormControl"
      (ngModelChange)="onChanged()>

A partial solution is to wrap the questions uvdos angular-material material form field in a custom questions uvdos angular-material component and implement the questions uvdos angular-material ControlValueAccessor interface on it. questions uvdos angular-material Besides content projection the effect is questions uvdos angular-material pretty much the same.

See full example on Stackblitz.

I used FormControl (reactive forms) questions uvdos angular-material inside CustomInputComponent but questions uvdos angular-material FormGroup or FormArray should work too questions uvdos angular-material if you need a more complex form element.

app.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <mat-form-field appearance="outline" floatLabel="always" color="primary">
    <mat-label>First name</mat-label>
    <input matInput placeholder="First name" formControlName="firstName" required>
    <mat-hint>Fill in first name.</mat-hint>
    <mat-error *ngIf="firstNameControl.invalid && (firstNameControl.dirty || firstNameControl.touched)">
      <span *ngIf="firstNameControl.hasError('required')">
        You must fill in the first name.
      </span>
    </mat-error>
  </mat-form-field>

  <custom-input
    formControlName="lastName"
    [errorMessages]="errorMessagesForCustomInput"
    [hint]="'Fill in last name.'"
    [label]="'Last name'"
    [isRequired]="true"
    [placeholder]="'Last name'"
    [validators]="validatorsForCustomInput">
  </custom-input>

  <button mat-flat-button
    color="primary"
    type="submit"
    [disabled]="form.invalid || form.pending">
    Submit
  </button>

</form>

custom-input.component.html

<mat-form-field appearance="outline" floatLabel="always" color="primary">
  <mat-label>{{ label }}</mat-label>

  <input
    matInput
    [placeholder]="placeholder"
    [required]="isRequired"
    [formControl]="customControl"
    (blur)="onTouched()"
    (input)="onChange($event.target.value)">
  <mat-hint>{{ hint }}</mat-hint>

  <mat-error *ngIf="customControl.invalid && (customControl.dirty || customControl.touched)">
    <ng-container *ngFor="let error of errorMessages">
    <span *ngFor="let item of error | keyvalue">
      <span *ngIf="customControl.hasError(item.key)">
        {{ item.value }}
      </span>
    </span>
    </ng-container>
  </mat-error>
</mat-form-field>

You need to import the MatInputModule questions uvdos angular-material into your app.module.ts file

import { MatInputModule} from questions uvdos angular-material ‘@angular/material’;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CustomerPage } from './components/customer/customer';
import { CustomerDetailsPage } from "./components/customer-details/customer-details";
import { CustomerManagementPageRoutingModule } from './customer-management-routing.module';
import { MatAutocompleteModule } from '@angular/material/autocomplete'
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CustomerManagementPageRoutingModule,
    MatAutocompleteModule,
    MatInputModule,
    ReactiveFormsModule,
    MatFormFieldModule
  ],

You can set appearance=»fill» inside questions uvdos angular-material your mat-form-field tag, it works for me

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Username Or Email</mat-label>
    <input matInput placeholder="Username Or Email" type="text">
  </mat-form-field>

  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Password</mat-label>
    <input matInput placeholder="Password" type="password">
  </mat-form-field>
</form>

use providers in component.ts file

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})

Uncaught Error: mat-form-field must questions uvdos angular-material contain a MatFormFieldControl.

This error occurs when ‘MatInputModule’ questions uvdos angular-material is missed in imports,

import { MatInputModule } from '@angular/material/input'
import { MatFormFieldModule } from '@angular/material/form-field'

@NgModule({
  imports: [
 MatInputModule ,
 MatFormFieldModule 
]})

importing MatInputModule in the questions uvdos angular-material module.ts file would help getting rid of questions uvdos angular-material the problem.

Note
Some time Error occurs, when we use questions uvdos angular-material «mat-form-field» tag around submit questions uvdos angular-material button like:

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

So kindly don’t use this tag around questions uvdos angular-material submit button