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:

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

textbox:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

Usage:

<textbox value="test" hint="my hint"></textbox>

This results in approximately this:

<textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
  <field>
    <mat-form-field class="mat-input-container mat-form-field">
      <div class="mat-input-wrapper mat-form-field-wrapper">
        <div class="mat-input-flex mat-form-field-flex">
          <div class="mat-input-infix mat-form-field-infix">
            <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">
            <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
          </div>
        </div>
        <div class="mat-input-underline mat-form-field-underline">
          <span class="mat-input-ripple mat-form-field-ripple"></span>
        </div>
        <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
      </div>
    </mat-form-field>
  </field>
</textbox>

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

Did you ever resolve the issue? I'm having the exact same problem. The answers are not relevant. — numsu, Jan 12 '18 at 09:30
No, unfortunately not :/. I found this: https://github.com/angular/material2/issues/9411 and if I understand this correctly this is unsupported atm. — Viktor Eriksson, Jan 26 '18 at 07:31
Ok.. Thanks, I ended up making a component that just wraps up all the hints and validations and placed that under the input element. — numsu, Jan 26 '18 at 10:27
@ViktorEriksson If my answer was useful to you, do you care to accept it? — darksoulsong, Feb 15 '18 at 13:22
I'm sorry but it was not useful, my question has very little to do with that answer. — Viktor Eriksson, Feb 16 '18 at 11:46
https://material.angular.io/components/form-field/overview#error-mat-form-field-must-contain-a-matformfieldcontrol — Amir Azizkhani, Jun 26 '19 at 03:11
My case, I used *ngIf in tag. Moving the if condition out to a resolved my issue. — vipanth, Nov 21 '20 at 20:21
Did you find a real solution to this since no answer come close to respond to your actual question? — Marcel Jr. Samson Morasse, Jan 04 '22 at 18:29

darksoulsong · Answer 1 · 2023-02-14T11:50:24.840

924

I was having a very similar issue; I imported MatFormFieldModule at my main module but forgot to add MatInputModule to the imports array, like so:

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


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

More info here.

edited Feb 14 '23 at 11:50

answered Oct 17 '17 at 17:06

darksoulsong

13,988
14
47
90

This is referenced in documentation now in `Troubleshooting` section of `form-field` : https://material.angular.io/components/form-field/overview#error-mat-form-field-must-contain-a-matformfieldcontrol Look for `Error: mat-form-field must contain a MatFormFieldControl` – Maxence Jun 16 '21 at 07:46
15

One day I will finally remember this... – Lukas Coorek Mar 03 '22 at 17:27
2

correct path is - import { MatInputModule } from '@angular/material/input'; – Binary_Hits00 Jan 11 '23 at 01:56
@Binary_Hits00 This comment should be upvoted because his import was giving me errors. It's two separate paths! – eSs Feb 08 '23 at 01:50
doesn't really work with Angular 15. Seems the problem with ng-content injection is not resolved yet. – Alex Burla Jul 19 '23 at 17:08

WasiF · Answer 2 · 2021-11-21T11:38:29.107

437

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 "@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 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 on input tag that is going to be false in any case because mat-form-field looks for matInput inside it. Instead put *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 out this problem#3

Problem 4: 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

edited Nov 21 '21 at 11:38

answered Apr 24 '18 at 12:54

WasiF

26,101
16
120
128

1

I encountered this issue when "matInput" was missing from the input statement. – Ali Celebi Jul 03 '20 at 15:48
1

i've imported MatInputModule, MatFormFieldModule and Restart (ng serve). It works Fine now! – Simon PII Aug 28 '20 at 00:34
3

exactly my problem was not inserted the 'matInput'. :'( tks – Elson Costa Jul 23 '21 at 13:56
1

Problem 4: having an *ngIf directive on the input[matInput] element. This was my mistake. I meant to put the *ngIf on the mat-form-field element itself. – William Herrmann Oct 01 '21 at 17:51
1

Problem 3. Empty content of ``. This means that you can use `NgIf` with ``, but you need to guarantee that an input tag will be present under any condition. – contributorpw Oct 27 '21 at 08:46
1

Thanks it worked but errors shown by Angular in console are confusing and not clear. they can easily say please import this or that module to resolve theproblem. – MindRoasterMir Dec 02 '21 at 13:19
1

I had a invariant of problem 2. when using a formControl from .ts my mistake was to use '' instead of '' – JimiSweden Apr 08 '22 at 11:22
1

I had the input element capitalized "" thanks, this fixed it – Rstar37 Aug 27 '22 at 17:56
problem 5 : you must set the providers in you @component : providers: [{ provide: MatFormFieldControl, useExisting: MyComponent }] – Christophe Le Besnerais Nov 14 '22 at 10:46

score 103 · Accepted Answer · edited Aug 09 '21 at 07:36

103

Import MatInputModule in your module.ts file and it will solve the problem.

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

The statement after it is the old 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.

edited Aug 09 '21 at 07:36

MindRoasterMir

324
1
2
18

answered Apr 04 '18 at 18:51

n.yakovenko

1,957
1
16
15

289

I came across this question googling an error message. The [answer below](https://stackoverflow.com/a/46795510/2745116), stating that `MatInputModule` needs to be imported solved my problem. Since this is the accepted answer, I'm adding the link here, hoping it will save other's time. – stefanbschneider Sep 16 '18 at 15:35
4

My problem was that I had neglected to import '**FormsModule**'. I hope this helps someone. – lerenau Sep 28 '18 at 10:39
11

Also inside a `` tag you have to make sure you added correctly `matInput` attribute on every `input` tag or or `matNativeControl` attribute on every ` – svassr Jul 11 '19 at 21:07
3

@CGFoX I wish they would update the documentation with this information and better examples... – Aug 11 '19 at 15:12
But you can kind of hack around it using ViewChild / ViewChildren: https://stackoverflow.com/a/58017564/3063191 – jlang Oct 22 '19 at 09:06
If it's still not working, just run `ng serve` again – Juan Herrera Mar 17 '20 at 10:10

Alexei - check Codidact · Answer 4 · 2019-05-26T06:25:43.600

33

This can also happen if you have a proper input within a mat-form-field, 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 "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]:

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

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

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

edited May 26 '19 at 06:25

answered Nov 22 '18 at 15:26

Alexei - check Codidact

22,016
16
145
164

5

Thanks, instead of using hidden you can move the ngIf condition on the whole mat-form-field tag – Mosta May 26 '19 at 03:24
1

same things occurs with an `ngSwitch` – wlf Feb 16 '21 at 08:04
This was my problem. The solution is a life saver. – lolololol ol Sep 04 '21 at 17:50

score 29 · Answer 5 · answered May 22 '19 at 13:04

29

If anyone got stuck with this error after attempting to nest a <mat-checkbox>, be of good cheer! It doesn't work inside a <mat-form-field> tag.

answered May 22 '19 at 13:04

Mina

610
7
21

1

Indeed. For more detail, see https://stackoverflow.com/a/54461014/574082. – blootsvoets Jul 20 '21 at 09:47
1

This was my case – Marc Roussel Nov 22 '21 at 21:00
1

Same for mat-slide-toggle – Kerim092 Nov 21 '22 at 14:22
1

This Answer, has, in fact, made me of good cheer. – StackOverflowUser Apr 22 '23 at 00:18

score 23 · Answer 6 · edited Feb 04 '21 at 02:59

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 <input> or <textarea> 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 <mat-select>, <mat-chip-list>, and any custom form field controls you've created.

Learn more about creating a "custom form field control" here

score 18 · Answer 7 · edited Oct 25 '21 at 10:11

I had this issue too, and I have <mat-select> element in my template, when I import the MatSelectModule into Module, it works, it doesn't make sense, but still I hope 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>

It works as without importing the module the mat-form-field control does not understand what a mat-select is. When it is imported it can fix up all the information and therefore can parse the template without further error. — PeterS, Mar 12 '18 at 14:02

score 15 · Answer 8 · edited Jan 15 '20 at 09:39

15

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



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

edited Jan 15 '20 at 09:39

THess

1,003
1
13
21

answered Jan 15 '20 at 08:14

Ib Abayomi Alli

361
3
6

8

Welcome to stackoverflow. When answering questions, please add some explaination as to what your code snippet does and why it solves the OP's question. For more info check here [answer] – Djensen Jan 15 '20 at 08:34
Why add it to your module's exports? – guilhermo Jul 05 '22 at 19:29

score 9 · Answer 9 · answered Nov 13 '19 at 05:48

9

if anyone is trying to nest a <mat-radio-group> inside a <mat-form-field> like below, you 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 <mat-form-field> tags

answered Nov 13 '19 at 05:48

steve sonius

398
3
11

I was having this issue, and had a snippet of markup with this sort of thing. Removing the `mat-form-field` made the issue go away for me. – Andrew Gray Feb 10 '20 at 21:37
Is there a reason that ```` doesn't support radio group inside of it? I was having this issue too and didn't think to just remove the mat form field tags because it didn't seem like it would be the proper thing to do since so many materials UI form examples use ````. I have all the various material form input modules for forms, select dropdowns and radio groups defined in my app.module.ts like many of the other answers reference. – Alex May 04 '20 at 20:44

score 8 · Answer 10 · edited Aug 27 '22 at 06:54

8

it means you are not importing MatInputModule like

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

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

edited Aug 27 '22 at 06:54

Shashank Agrawal

25,161
11
89
121

answered Aug 03 '21 at 17:56

Umer Baba

285
3
4

1

This answer is already given: https://stackoverflow.com/a/49658335/5468463. So the upvote is very suspicious – Vega Aug 10 '21 at 06:12
this actually fixed it for me – jameseg Aug 03 '23 at 22:01

score 7 · Answer 11 · answered Oct 15 '17 at 19:51

7

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.

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

answered Oct 15 '17 at 19:51

ReturnTable

355
4
12

1

hmm not sure, you have pasted the generated output. In the real code it already is matInput, if you see "textbox-section". I have no problems getting it to work when just using material, its when trying to make my own compoenent with projection it stops working. My plunker seem to be having problems atm, hopefully it will fix itself during the day. – Viktor Eriksson Oct 16 '17 at 10:24
Oh I see, my bad. This was a long shot anyway. I'll follow to see if anyone can actually come up with the correct lean angle, I'm curious about this issue. – ReturnTable Oct 17 '17 at 15:55
2

It happened with me, I have forgotten to change `mdInput` to `matInput`. – Ebraheem Alrabeea Nov 26 '17 at 15:34
2

Angular 5: the tag attribute should be `matInput` instead of `mat-input`. – Stavm Dec 19 '17 at 19:44

score 6 · Answer 12 · answered Jun 27 '20 at 08:01

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 <input matInput type="number" step="0.01" formControlName="price" />

4. If you leave mat-form-field as an empty wrapper – KununguaK Iversen Apr 13 '22 at 15:03 — KununguaK Iversen, Apr 13 '22 at 15:03

score 5 · Answer 13 · answered Jun 15 '19 at 21:09

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 <input> 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 <input/>. In other words, I did this (see the end of the input tag 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 else to invalidate your <input>, 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.

This also happens, apparently, if you don't have a proper closing tag. `` did not work, but `` did. — Rich, Jul 28 '20 at 16:40

score 5 · Answer 14 · answered May 15 '21 at 18:54

I had the problem occuring in one of my Karma tests

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

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

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

score 4 · Answer 15 · answered Aug 29 '19 at 21:10

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

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

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

score 3 · Answer 16 · answered May 21 '19 at 14:05

3

I had accidentally removed the matInput directive from the input field which 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>

answered May 21 '19 at 14:05

Franklin Pious

3,670
3
26
30

Also necessary for `textarea` component, which was the case for me. – Ruben Szekér Oct 21 '20 at 20:31

score 3 · Answer 17 · answered Feb 20 '20 at 07:11

3

You have missed matInput directive in your input tag.

answered Feb 20 '20 at 07:11

Isaac Pitwa

372
2
6

score 3 · Answer 18 · answered Jun 04 '20 at 15:46

3

use providers in component.ts file

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

answered Jun 04 '20 at 15:46

Bimzee

1,138
12
15

score 3 · Answer 19 · answered Jul 06 '20 at 08:39

3

New updated MatInput Module import is:

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

As per Angular Materials API

answered Jul 06 '20 at 08:39

SaiSurya

1,046
8
14

score 3 · Answer 20 · answered Feb 11 '21 at 11:54

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

don't forget to add at first of <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 <tabe></table>

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

score 3 · Answer 21 · answered Jul 30 '21 at 06:02

Uncaught Error: mat-form-field must contain a MatFormFieldControl.

This error occurs when 'MatInputModule' 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 module.ts file would help getting rid of the problem.

Ashrik Ahamed · Answer 22 · 2023-02-24T04:26:15.947

I forgot to add matInput property inside input tag

<mat-form-field appearance="outline">
    <mat-label>Mobile</mat-label>
    <input type="text"
           [(ngModel)]="parent.mobile"
           formControlName="mobile"
           id="mobile"
           name="mobile">
  </mat-form-field>

After adding it:

<mat-form-field appearance="outline">
    <mat-label>Mobile</mat-label>
    <input type="text"
       matInput
       [(ngModel)]="parent.mobile"
       formControlName="mobile"
       id="mobile"
       name="mobile">   
 </mat-form-field>

score 2 · Answer 23 · answered Feb 25 '19 at 01:14

2

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

answered Feb 25 '19 at 01:14

rivanov

1,214
18
19

score 2 · Answer 24 · answered Apr 23 '19 at 05:04

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 input tag was what fixed this error for me.

score 2 · Answer 25 · answered Jun 09 '19 at 06:22

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.

score 2 · Answer 26 · answered Jul 03 '19 at 05:18

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 < mat-select>, < mat-chip-list>, and any custom form field controls you've created.

score 2 · Answer 27 · answered Jul 29 '19 at 18:39

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:

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

score 2 · Answer 28 · answered Sep 10 '19 at 08:12

2

You might have missed to import MatInputModule

answered Sep 10 '19 at 08:12

Pranith Baggan

104
1
7

score 2 · Answer 29 · answered Nov 14 '19 at 12:21

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

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

score 2 · Answer 30 · answered Apr 18 '20 at 13:59

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

score 2 · Answer 31 · answered May 10 '21 at 14:51

For me the error was due to lack of <input> and formControl property in <mat-form-field></mat-form-field>

<form [formGroup]="FormName">
    <mat-form-field>
    <mat-label>Name</mat-label>
    </mat-form-field>
</form>

which is wrong.. Correct one is the below

<form [formGroup]="FormName">
    <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name">
    </mat-form-field>
</form>

score 1 · Answer 32 · answered Nov 20 '19 at 01:50

Note Some time Error occurs, when we use "mat-form-field" tag around submit 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 submit button

score 1 · Answer 33 · answered Jun 04 '20 at 11:36

You can set appearance="fill" inside 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>

This fixed my issue. Can you please explain what `appearence = "fill"` is doing here — IamGrooot, Jul 15 '20 at 10:21

score 1 · Answer 34 · answered Jul 09 '21 at 10:51

1

100% solution guaranteed Just add matInput directive to each input, matselect and mat-chip-list

answered Jul 09 '21 at 10:51

Zia Khan

188
2
9

score 0 · Answer 35 · answered Feb 11 '20 at 08:57

i was getting the same issue due to commented element as follows.

<mat-form-field>
    <mat-label>Database</mat-label>
    <!-- <mat-select>
        <mat-option *ngFor="let q of queries" [value]="q.id">
            {{q.name}}
        </mat-option>
    </mat-select>  -->
</mat-form-field>

form field should have element! (e.g. the input, textarea, select, etc.)

score 0 · Answer 36 · answered Sep 20 '20 at 06:31

0

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'

answered Sep 20 '20 at 06:31

Matjaz Hirsman

326
3
9

score 0 · Answer 37 · answered Sep 29 '20 at 15:50

I had the same error message, but in my case, nothing above didn't fix the problem. The solution was in "label". You need to add 'mat-label' and to put your input inside 'label' tags also. Solution of my problem is in the snippet below:

  <mat-label>
     Username
  </mat-label>
  <label>
    <input 
       matInput 
       type="text" 
       placeholder="Your username" 
       formControlName="username"/>
  </label>

score 0 · Answer 38 · answered Oct 26 '20 at 10:08

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:

<mat-form-field class="full-width">
</mat-form-field>
<input matInput placeholder="Title" formControlName="title" #title />

Fix:

<mat-form-field class="full-width">
    <input matInput placeholder="Title" formControlName="title" #title />
</mat-form-field>

score 0 · Answer 39 · answered Sep 28 '21 at 18:22

In my case it was the TranslocoService service which probably messes with the after init.

My code was like this :

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        *transloco="let t"
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        placeholder="{{t('customer.management.customers.search.customer.name')}}">
</mat-form-field>

I have changed it like this.

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        [placeholder]="searchBarPlaceHolder">
</mat-form-field>

The place holder value comes from a field at the Component. After this modification the error has gone. If you are using transloco you can try this.

score 0 · Answer 40 · answered Dec 02 '21 at 17:52

0

if there is input tag under mat-form-field then each input must have matInput

answered Dec 02 '21 at 17:52

Zia Khan

188
2
9

score 0 · Answer 41 · answered Jul 28 '23 at 00:40

The idea of implementation doesn't make much sense, why do you need to add input as ng-content?

You just need to create an element that holds mat-form-field, input and it's parameters; and all the other things from mat-form-field, such as label and hint.

NOTE: the implementation below is quite old and should be upgraded, if you have any questions or ideas, please let me know in the comments

So create one and pass required parameters:

import { Component, forwardRef, Input, Provider } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { StringOrNull } from '../../../app.types';

export const FORM_FIELD_INPUT_TYPES = {
  checkbox: 'checkbox',
  color: 'color',
  date: 'date',
  dateTime: 'datetime',
  email: 'email',
  file: 'file',
  image: 'image',
  month: 'month',
  number: 'number',
  password: 'password',
  radio: 'radio',
  range: 'range',
  reset: 'reset',
  search: 'search',
  select: 'select',
  telephone: 'telephone',
  text: 'text',
  time: 'time',
  url: 'url',
  week: 'week',
} as const;
export const FORM_FIELD__VALUE_ACCESSOR_PROVIDER: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => FormFieldComponent),
  multi: true
};
export const FORM_FIELD_ERRORS = {
  required: {
    key: 'required',
    message: 'This field is required'
  }
};

export const FORM_FIELD_SELECT_OPTION_DIVIDER_TITLE = 'divider' as const;

export interface FormField extends Partial<FormFieldSelect> {
  hint: StringOrNull;
  label: StringOrNull;
  inputType: FormFieldInputType;
  formControl: FormControl,
}
export type FormFieldInputType = (typeof FORM_FIELD_INPUT_TYPES)[keyof typeof FORM_FIELD_INPUT_TYPES];
export type FormFieldSelect = { selectOptions: Array<FormFieldSelectOption> };
export type FormFieldSelectOption = {
  title: string|typeof FORM_FIELD_SELECT_OPTION_DIVIDER_TITLE;
  value: any;
};


@Component({
  selector: 'app-form-field',
  template: `
      <mat-form-field>
          <ng-template #inputTemplate>
              <input
                matInput
                [formControl]="formControl"
                [required]="required"
                [type]="inputType">
          </ng-template>
          <ng-template #inputSelectTemplate>
              <mat-select>
                  <mat-option
                    [value]="null">
                      Null
                  </mat-option>
                  <ng-container
                    *ngFor="let option of selectOptions"
                    [ngSwitch]="option.title">
                      <mat-divider *ngSwitchCase="'${FORM_FIELD_SELECT_OPTION_DIVIDER_TITLE}'">
                      </mat-divider>
                      <mat-option
                        *ngSwitchDefault
                        [value]="option.value">
                          {{option.title}}
                      </mat-option>
                  </ng-container>
              </mat-select>
          </ng-template>
          <ng-container [ngSwitch]="inputType">
              <ng-container
                *ngSwitchDefault
                [ngTemplateOutlet]="inputTemplate">
              </ng-container>
              <ng-container
                *ngSwitchCase="'${FORM_FIELD_INPUT_TYPES.select}'"
                [ngTemplateOutlet]="inputSelectTemplate">
              </ng-container>
          </ng-container>
          <mat-label *ngIf="label">
              {{label}}
          </mat-label>
          <mat-hint *ngIf="hint">
              {{hint}}
          </mat-hint>
          <mat-error *ngIf="formControl.hasError('${FORM_FIELD_ERRORS.required.key}')">
              ${FORM_FIELD_ERRORS.required.message}
          </mat-error>
      </mat-form-field>
  `,
  styles: [],
  providers: [
    FORM_FIELD__VALUE_ACCESSOR_PROVIDER,
  ]
})
export class FormFieldComponent implements ControlValueAccessor, FormField {

  @Input() set disabled(disabled: boolean) {
    if (disabled) {
      this.formControl?.disable();
    } else {
      this.formControl?.enable();
    }
  }
  @Input() formControl: FormControl = new FormControl();
  @Input() hint: StringOrNull = null;
  @Input() label: StringOrNull = null;
  @Input() required: boolean = false;
  @Input() inputType: FormFieldInputType = FORM_FIELD_INPUT_TYPES.text;
  @Input() selectOptions: Array<FormFieldSelectOption> = [];

  onChange = () => {};
  onTouch = () => {};

  registerOnChange(func: any): void {
    this.onChange = func;
  }

  registerOnTouched(func: any): void {
    this.onTouch = func;
  }

  setDisabledState(disabled: boolean): void { }

  writeValue(obj: any): void { }
}

After that I can create custom components for my project, naming those:

form-field-boolean
form-field-text
form-field-lookup

and so on. This is the correct implementation that you can use all over and be sure that everything is easy to fix. No need to use ng-content to pass input that has a just a few parameters that could be passed directly into the component.

score -1 · Answer 42 · answered Jan 02 '20 at 17:22

-1

I had same issue

issue is simple

only you must import two modules to your project

MatFormFieldModule MatInputModule

answered Jan 02 '20 at 17:22

Fatih Çakıroğlu

444
5
8

score -4 · Answer 43 · answered Dec 12 '21 at 10:13

Every one have explained how he got this problem solved but none of the answers solved my problem and I started getting annoyed when I found out that before doing all that expalained in these answer,

you have to install ( add ) angular material to your project

ng add @angular/material

for me this was the reason for the problem.

mat-form-field must contain a MatFormFieldControl

43 Answers43

Problem 1: `MatInputModule` Not imported

Problem 2: matInput - spellings mistake / forget to add

Problem 3: Invalid *ngIf placement

Problem 4: Still compiler giving ERROR

Angular 9+ ...Material 9+

Linked

mat-form-field must contain a MatFormFieldControl

43 Answers43

Problem 1: MatInputModule Not imported

Problem 2: matInput - spellings mistake / forget to add

Problem 3: Invalid *ngIf placement

Problem 4: Still compiler giving ERROR

Angular 9+ ...Material 9+

Linked

Problem 1: `MatInputModule` Not imported