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:

Answer 1

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>

Answer 2

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



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

Answer 3

New updated MatInput Module import is:

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

As per Angular Materials API

Answer 4

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.

Answer 5

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"

Answer 6

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>