mat-form-field must contain a MatFormFieldControl

Question

We are trying to build our own form-field-Components at our Company  We are trying to wrap material design s Components like this   field    lt mat-form-field gt       lt ng-content gt  lt  ng-content gt       lt mat-hint align  start  gt  lt strong gt   hint   lt  strong gt   lt  mat-hint gt       lt mat-hint align  end  gt   message value length     256 lt  mat-hint gt       lt mat-error gt This field is required lt  mat-error gt   lt  mat-form-field gt    textbox    lt field hint  hint  gt       lt input matInput       placeholder   placeholder        value   value       change   onChange  event         keydown   onKeydown  event         keyup   onKeyup  event         keypress   onKeypress  event   gt   lt  field gt    Usage    lt textbox value  test  hint  my hint  gt  lt  textbox gt    This results in approximately this        lt textbox  placeholder  Personnummer samordningsnummer  value    ng-reflect-placeholder  Personnummer samordningsnummer  gt          lt field gt             lt mat-form-field class  mat-input-container mat-form-field gt                lt div class  mat-input-wrapper mat-form-field-wrapper  gt                   lt div class  mat-input-flex mat-form-field-flex  gt                      lt div class  mat-input-infix mat-form-field-infix  gt                         lt 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  gt                         lt span class  mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper  gt  lt  span gt                      lt  div gt                   lt  div gt                   lt div class  mat-input-underline mat-form-field-underline  gt                      lt span class  mat-input-ripple mat-form-field-ripple  gt  lt  span gt                   lt  div gt                   lt div class  mat-input-subscript-wrapper mat-form-field-subscript-wrapper  gt  lt  div gt                lt  div gt             lt  mat-form-field gt          lt  field gt       lt  textbox gt    But I m getting  mat-form-field must contain a MatFormFieldControl  in the console  I guess this has to do with mat-form-field not directly containing a matInput-field  But it is containing it  it s just withing the ng-content projection   Here is a blitz  https   stackblitz com edit angular-xpvwzf

User · Answer

Problem 1  MatInputModule Not imported import MatInputModule and MatFormFieldModule inside module i e  app module ts import   MatInputModule   from   angular material input   import   MatFormFieldModule   from  quot  angular material form-field quot    Problem 2  Spellings Mistake Be sure to add matInput and it is case-sensitive   lt input matInput type  quot text quot    gt   Problem 3  Still compiler giving ERROR if angular compiler still giving error after fixing above given problems then you must try with restarting the app  ng serve

User · Answer

A partial solution is to wrap the material form field in a custom component and implement the ControlValueAccessor interface on it  Besides content projection the effect is pretty much the same    See full example on Stackblitz   I used FormControl  reactive forms  inside CustomInputComponent but FormGroup or FormArray should work too if you need a more complex form element   app component html   lt form  formGroup   form   ngSubmit   onSubmit    gt      lt mat-form-field appearance  outline  floatLabel  always  color  primary  gt       lt mat-label gt First name lt  mat-label gt       lt input matInput placeholder  First name  formControlName  firstName  required gt       lt mat-hint gt Fill in first name  lt  mat-hint gt       lt mat-error  ngIf  firstNameControl invalid  amp  amp   firstNameControl dirty    firstNameControl touched   gt         lt span  ngIf  firstNameControl hasError  required    gt          You must fill in the first name         lt  span gt       lt  mat-error gt     lt  mat-form-field gt      lt custom-input     formControlName  lastName       errorMessages   errorMessagesForCustomInput       hint    Fill in last name         label    Last name        isRequired   true       placeholder    Last name        validators   validatorsForCustomInput  gt     lt  custom-input gt      lt button mat-flat-button     color  primary      type  submit       disabled   form invalid    form pending  gt      Submit    lt  button gt    lt  form gt    custom-input component html   lt mat-form-field appearance  outline  floatLabel  always  color  primary  gt     lt mat-label gt    label    lt  mat-label gt      lt input     matInput      placeholder   placeholder       required   isRequired       formControl   customControl       blur   onTouched         input   onChange  event target value   gt     lt mat-hint gt    hint    lt  mat-hint gt      lt mat-error  ngIf  customControl invalid  amp  amp   customControl dirty    customControl touched   gt       lt ng-container  ngFor  let error of errorMessages  gt       lt span  ngFor  let item of error   keyvalue  gt         lt span  ngIf  customControl hasError item key   gt             item value           lt  span gt       lt  span gt       lt  ng-container gt     lt  mat-error gt   lt  mat-form-field gt

User · Answer

You have missed matInput  directive in your input tag

User · Answer

New updated MatInput Module import is  import  MatInputModule  from   angular material input    As per Angular Materials API

User · Answer

Angular 9     Material 9  I have noticed 3 mistakes can can give rise to the same error   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  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 When you fail to include matInput in your tag  i e  lt input matInput type  quot number quot  step  quot 0 01 quot  formControlName  quot price quot    gt

User · Answer

This error appears also when simply by mistake input is placed out of the mat-form-field  To fix it just bring it inside like below  Bad code   lt mat-form-field class  quot full-width quot  gt   lt  mat-form-field gt   lt input matInput placeholder  quot Title quot  formControlName  quot title quot   title   gt   Fix   lt mat-form-field class  quot full-width quot  gt       lt input matInput placeholder  quot Title quot  formControlName  quot title quot   title   gt   lt  mat-form-field gt

User · Answer

I had accidentally removed the matInput directive from the input field which caused the same error   eg     lt mat-form-field gt      lt input  readOnly   readOnly  name  amount  formControlName  amount  placeholder  Amount  gt   lt  mat-form-field gt    fixed code    lt mat-form-field gt      lt input matInput  readOnly   readOnly  name  amount  formControlName  amount  placeholder  Amount  gt   lt  mat-form-field gt

User · Answer

I m not sure if it could be this simple but I had the same issue  changing  mat-input  to  matInput  in the input field resolved the problem  In your case I see  matinput  and it s causing my app to throw the same error     lt 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  gt     matinput      matInput

User · Answer

You might have missed to import MatInputModule

User · Answer

You need to import the MatInputModule into your app module ts file      import   MatInputModule  from   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

User · Answer

I had the same error message  but in my case  nothing above didn t fix the problem  The solution was in  quot label quot   You need to add  mat-label  and to put your input inside  label  tags also  Solution of my problem is in the snippet below     lt mat-label gt       Username    lt  mat-label gt     lt label gt       lt input         matInput         type  quot text quot          placeholder  quot Your username quot          formControlName  quot username quot   gt     lt  label gt

User · Answer

Quoting from the official documentation here   Error  mat-form-field must contain a MatFormFieldControl This error occurs when you have not added a form field control to your form field  If your form field contains a native  lt input gt  or  lt textarea gt  element  make sure you ve added the matInput directive to it and have imported MatInputModule  Other components that can act as a form field control include  lt mat-select gt    lt mat-chip-list gt   and any custom form field controls you ve created   Learn more about creating a  quot custom form field control quot  here

User · Answer

This can also happen if you have a proper input within a mat-form-field  but it has a ngIf on it  E g     lt mat-form-field gt       lt mat-chip-list  ngIf    dataLoading  gt           lt  -- other content here -- gt       lt  mat-chip-list gt   lt  mat-form-field gt    In my case  mat-chip-list is supposed to  appear  only after its data is loaded  However  the validation is performed and mat-form-field complains with      mat-form-field must contain a MatFormFieldControl   To fix it  the control must be there  so I have used  hidden     lt mat-form-field gt       lt mat-chip-list  hidden    dataLoading  gt           lt  -- other content here -- gt       lt  mat-chip-list gt   lt  mat-form-field gt      An alternative solution is proposed by Mosta  move  ngIf for mat-form-field    lt mat-form-field  ngIf    dataLoading  gt       lt mat-chip-list  gt           lt  -- other content here -- gt       lt  mat-chip-list gt   lt  mat-form-field gt

User · Answer

Unfortunately I can t just comment on some already good answers as I don t have the SO points yet  however  there are 3 key modules that you ll need to make sure you are importing into your component s parent module  aside from what you have to import into your component directly   I wanted to briefly share them and highlight what they do    MatInputModule MatFormFieldModule ReactiveFormsModule   The first two are for Angular Material  A lot of people new to Angular Material will instinctively come across one of these and not realize that building a form requires both   So what s the difference between them   MatFormFieldModule encompasses all the different types of form fields that Angular Material has available   This is more of a high level module for form fields in general  whereas the MatInputModule is specifically for  input  field types  as opposed to select boxes  radio buttons  etc   The third item on the above list is Angular s Reactive Forms Module   The Reactive Forms Module is responsible for a ton of under-the-hood Angular love   If you are going to work with Angular  I highly recommend that you spend some time reading Angular Docs   They have all of your answers   Building applications rarely DOESN T involve forms  and more often than not  your application will involve reactive forms   For that reason  please take the time to read these two pages   Angular Docs  Reactive Forms  Angular Docs  Reactive Forms Module  The first doc  Reactive Forms  will be your most powerful weapon as you get started  and the second doc will be your most power weapon as you get on to more advanced applications of Angular Reactive Forms   Remember  these need to be imported directly into your component s module  not the component you are using them in  If I remember correctly  in Angular 2  we imported the entire set of Angular Material modules in our main app module  and then imported what we needed in each of our components directly   The current method is much more efficient IMO because we are guaranteed to import the entire set of Angular Material modules if we only use a few of them   I hope this provides a bit more insight into building forms with Angular Material

User · Answer

import   MatFormFieldModule   from   angular material form-field   import   MatInputModule   from   angular material input    don t forget to add at first of  lt tabe gt  lt  table gt    lt mat-form-field gt           lt mat-label gt Filter lt  mat-label gt           lt input matInput  keyup   quot applyFilter  event  quot  placeholder  quot Ex  Helium quot   input gt         lt  mat-form-field gt   don t forget to add at last of  lt tabe gt  lt  table gt   lt tr class  quot mat-row quot   matNoDataRow gt   lt td class  quot mat-cell quot  colspan  quot 4 quot  gt     No data matching the filter  quot   input value   quot   lt  td gt   lt  tr gt

User · Answer

In my case I changed this    lt mat-form-field gt     lt input type  email  placeholder  email    ngModel    data email  gt   lt  mat-form-field gt    to this    lt mat-form-field gt     lt input matInput type  email  placeholder  email    ngModel    data email  gt   lt  mat-form-field gt    Adding the matInput directive to the input tag was what fixed this error for me

User · Answer

i was getting the same issue due to commented element as follows    lt mat-form-field gt       lt mat-label gt Database lt  mat-label gt       lt  --  lt mat-select gt           lt mat-option  ngFor  let q of queries   value   q id  gt                q name            lt  mat-option gt       lt  mat-select gt   -- gt   lt  mat-form-field gt    form field should have element   e g  the input  textarea  select  etc

User · Answer

Note Some time Error occurs  when we use  mat-form-field  tag around submit button like     lt mat-form-field class  example-full-width  gt      lt button mat-raised-button type  submit  color  primary  gt   Login lt  button gt      lt  mat-form-field gt    So kindly don t use this tag around submit button

User · Answer

I had the module imported and directive set and after executing  ng add  angular material  again it started working  Maybe it would be enough just to restart app with  ng serve

User · Answer

MatRadioModule won t work inside MatFormField  The docs say     This error occurs when you have not added a form field control to your   form field  If your form field contains a native  or    element  make sure you ve added the matInput directive to it and have   imported MatInputModule  Other components that can act as a form field   control include  lt  mat-select    lt  mat-chip-list   and any custom form   field controls you ve created

User · Answer

import  MatInputModule  from   angular material input       NgModule       imports            MatInputModule            exports            MatInputModule

User · Answer

use providers in component ts file   Component    selector   your-selector    templateUrl   template html    styleUrls    style css     providers       provide  MatFormFieldControl  useExisting  FormFieldCustomControlExample

User · Answer

if anyone is trying to nest a  lt mat-radio-group gt  inside a  lt mat-form-field gt  like below  you will get this error            lt mat-form-field gt                   lt  --  lt mat-label gt Image Position lt  mat-label gt  -- gt                   lt mat-radio-group aria-label  Image Position    ngModel    section field 1  gt                       lt mat-radio-button value  left  gt Left lt  mat-radio-button gt                       lt mat-radio-button value  right  gt Right lt  mat-radio-button gt                   lt  mat-radio-group gt               lt  mat-form-field gt    remove the parent   lt mat-form-field gt  tags

User · Answer

Unfortunately content projection into mat-form-field is not supported yet  Please track the following github issue to get the latest news about it  By now the only solution for you is either place your content directly into mat-form-field component or implement a MatFormFieldControl class thus creating a custom form field component

User · Answer

I had this issue too  and I have  lt mat-select gt  element in my template  when I import the MatSelectModule into Module  it works  it doesn t make science  but stil hope it can help you   import   MatSelectModule   from   angular material select    imports        BrowserModule      BrowserAnimationsModule      MatSidenavModule      MatButtonModule      MatIconModule      MatToolbarModule      MatFormFieldModule      MatProgressSpinnerModule      MatInputModule      MatCardModule      MatSelectModule      lt div class  example-container  gt       lt mat-form-field gt           lt input matInput placeholder  Input  gt       lt  mat-form-field gt        lt mat-form-field gt           lt textarea matInput placeholder  Textarea  gt  lt  textarea gt       lt  mat-form-field gt        lt mat-form-field gt           lt mat-select placeholder  Select  gt               lt mat-option value  option  gt Option lt  mat-option gt           lt  mat-select gt       lt  mat-form-field gt   lt  div gt

User · Answer

If anyone got stuck with this error after attempting to nest a  lt mat-checkbox gt   be of good cheer  It doesn t work inside a  lt mat-form-field gt  tag

User · Answer

The same error can occur if you have a mat slide within a mat from field as the only element in my case I had     lt mat-form-field gt       lt mat-slide-toggle   ngModel    myvar  gt         Some Text       lt  mat-slide-toggle gt    lt  mat-form-field gt    This might happen if you had several attributes within the   lt mat-form-field gt  Simple solution was to move the slide toggle to the root

User · Answer

You could try following this guide and implement provide your own MatFormFieldControl

User · Answer

If all of the main code structure configuration answers above don t solve your issue  here s one more thing to check  make sure that you haven t in some way invalidated your  lt input gt  tag     For instance  I received the same mat-form-field must contain a MatFormFieldControl error message after accidentally putting a required attribute after a self-closing slash    which effectively invalidated my  lt input  gt   In other words  I did this  see the end of the input tag attributes     wrong      lt input matInput type  text  name  linkUrl   formControl   listingForm controls  linkUrl     required gt    right    lt input matInput type  text  name  linkUrl   formControl   listingForm controls  linkUrl    required  gt     If you make that mistake or something else to invalidate your  lt input gt   then you could get the mat-form-field must contain a MatFormFieldControl error  Anyway  this is just one more thing to look for as you re debugging

User · Answer

You can set appearance  fill  inside your mat-form-field tag  it works for me   lt form class  example-form  gt     lt mat-form-field class  example-full-width  appearance  fill  gt       lt mat-label gt Username Or Email lt  mat-label gt       lt input matInput placeholder  Username Or Email  type  text  gt     lt  mat-form-field gt      lt mat-form-field class  example-full-width  appearance  fill  gt       lt mat-label gt Password lt  mat-label gt       lt input matInput placeholder  Password  type  password  gt     lt  mat-form-field gt   lt  form gt

User · Answer

In my case  one of my closing parenthesis for  onChanges    were missed on the input element and thus the input element was apparently not being rendered at all    lt input mat-menu-item        matInput type  text          formControl   myFormControl         ngModelChange   onChanged   gt

User · Answer

I had same issue  issue is simple  only you must import two modules to your project  MatFormFieldModule  MatInputModule

User · Answer

I had this issue  I imported MatFormFieldModule at my main module  but forgot to add MatInputModule to the imports array  like so  import   MatFormFieldModule  MatInputModule   from   angular material     NgModule       imports            MatFormFieldModule          MatInputModule          export class AppModule      More info here

[angular] mat-form-field must contain a MatFormFieldControl

Problem 1: `MatInputModule` Not imported

Problem 2: Spellings Mistake

Problem 3: Still compiler giving ERROR

Examples related to angular

Examples related to angular-material2