用ChatGPT解决这个技术问题 Extra ChatGPT

mat-form-field must contain a MatFormFieldControl

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.
No, unfortunately not :/. I found this: github.com/angular/material2/issues/9411 and if I understand this correctly this is unsupported atm.
Ok.. Thanks, I ended up making a component that just wraps up all the hints and validations and placed that under the input element.
I'm sorry but it was not useful, my question has very little to do with that answer.
My case, I used *ngIf in tag. Moving the if condition out to a resolved my issue.

C
Christopher Moore

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.

This is referenced in documentation now in Troubleshooting section of form-field : material.angular.io/components/form-field/… Look for Error: mat-form-field must contain a MatFormFieldControl
One day I will finally remember this...
W
WasiF

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
Ahh this was driving me crazy. Reason one worked for me. I feel like that should be specified in the documentation, even though it seems obvious now.
Problem 3. Had to restart. Thanks!
in my case it was problem1 and problem3 :) we should remember to restart the app after importing new module.
I had problem 2 and I never felt more like an idiot. Thanks!:))
exactly my problem was not inserted the 'matInput'. :'( tks
M
MindRoasterMir

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.

I came across this question googling an error message. The answer below, 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.
My problem was that I had neglected to import 'FormsModule'. I hope this helps someone.
@CGFoX You are absolutely right dude!! importing MatInputModule solved my problem!!
Also inside a <mat-form-field> tag you have to make sure you added correctly matInput attribute on every input tag or or matNativeControl attribute on every <select>
@CGFoX I wish they would update the documentation with this information and better examples...
A
Alexei - check Codidact

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>
Thanks, instead of using hidden you can move the ngIf condition on the whole mat-form-field tag
same things occurs with an ngSwitch
This was my problem. The solution is a life saver.
T
The Red Pea

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 or