我们正试图在我们公司建立我们自己的形式场组件。我们试图这样包装材料设计的组件:

字段:

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

文本框:

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

用法:

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

结果大致如下:

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

但是我在控制台得到“mat-form-field必须包含MatFormFieldControl”。我猜这与mat-form-field不直接包含matinput字段有关。但它包含了它,只是在ng-content投影中。

以下是闪电战: https://stackblitz.com/edit/angular-xpvwzf


当前回答

我不小心从输入字段中删除了matInput指令,这导致了同样的错误。

eg.

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

固定的代码

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

其他回答

这里引用官方文件:

错误:mat-form-field必须包含MatFormFieldControl 当您没有将表单字段控件添加到表单字段时,将发生此错误。如果你的表单字段包含一个原生的<input>或<textarea>元素,确保你已经添加了matInput指令,并导入了MatInputModule。其他可以充当表单字段控件的组件包括<mat-select>、<mat-chip-list>以及您已创建的任何自定义表单字段控件。

在这里了解更多关于创建“自定义表单字段控件”的信息

如果上面所有主要的代码结构/配置答案都不能解决您的问题,那么还有一件事需要检查:确保您没有以某种方式使<input>标记失效。

例如,我收到了相同的mat-form-field必须包含一个MatFormFieldControl错误消息,在意外地将一个必需的属性放在自关闭斜杠/之后,这有效地使我的<input/>无效。换句话说,我这样做了(参见输入标签属性的末尾):

错误的:

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

正确的:

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

如果你犯了这个错误或其他使你的<input>无效的错误,那么你可以得到mat-form-field必须包含一个MatFormFieldControl错误。不管怎样,这只是调试时要注意的另一件事。

我也有这个问题,我有<mat-select>元素在我的模板,当我导入MatSelectModule到模块,它的工作,它没有意义,但我仍然希望它能帮助你。

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>

新更新的MatInput模块导入是:

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

根据Angular Materials API

如果你在mat-form-field中有一个正确的输入,但它有一个ngIf,这也会发生。例如:

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

在我的例子中,mat-chip-list应该只在其数据加载后才“出现”。但是,在执行验证时,mat-form-field会抱怨

mat-form-field必须包含MatFormFieldControl

为了修复它,控件必须在那里,所以我使用[hidden]:

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

Mosta为mat-form-field提出了一个替代方案:move *ngIf:

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