我们正在尝试在我们的公司构建自己的表单域组件。我们试图像这样包装材料设计的组件：

领域：

<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”的信息。我想这与不直接包含matInput-field的mat-form-field有关。但是它包含了它，只是带有ng-content投影。

这是闪电战：https : //stackblitz.com/edit/angular-xpvwzf

不幸的是，尚不支持将内容投影到mat-form-field中。请跟踪以下github问题以获取有关它的最新消息。

到目前为止，唯一适合您的解决方案是将您的内容直接放入mat-form-field组件中，或者实现MatFormFieldControl类，从而创建一个自定义表单字段组件。

我有这个问题。我MatFormFieldModule在主模块上导入了，但是忘了添加MatInputModule到imports数组中，如下所示：

import { MatFormFieldModule, MatInputModule } from '@angular/material';

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

希望能帮助到你。

更多信息在这里。

解决方案1-导入MatInputModule

导入MatInputModule模块内部即app.module.ts

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

@NgModule({
  imports: [
     // .......
     MatInputModule
     // .......
  ]
})
export class AppModule { }

解决方案2-拼写错误

确保添加matInput，并且区分大小写。

<input matInput type="text" />

在这里引用官方文档：

错误：mat-form-field必须包含MatFormFieldControl

当您尚未向窗体字段添加窗体字段控件时，会发生此错误。如果您的表单字段包含本机或元素，请确保已向其添加matInput指令并导入了MatInputModule。可以用作表单字段控件的其他组件包括，和您创建的任何自定义表单字段控件。

如果您在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：移动* ngIf为mat-form-field：

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

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



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

我不确定是否可以这么简单，但是我遇到了同样的问题，在输入字段中将“ mat-input”更改为“ matInput”可以解决此问题。在您的情况下，我看到“ matinput”，这导致我的应用程序抛出相同的错误。

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

如果有人尝试嵌套a <mat-checkbox>后仍然遇到此错误，请加油！它在<mat-form-field>标签内不起作用。

如果有人试图<mat-radio-group>在<mat-form-field> 下面嵌套一个like，您将收到此错误

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

删除父 <mat-form-field>标签

我也遇到了这个问题，并且<mat-select>我的模板中有元素，当我将MatSelectModule导入Module时，它可以工作，虽然没有科学依据，但仍然希望它能为您提供帮助。

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>

不幸的是，由于我还没有SO点，所以我不能仅对一些已经很好的答案发表评论，但是，除了3个主要模块之外，您还需要确保要导入到组件的父模块中的3个关键模块您必须直接导入到组件中。我想简要分享一下它们，并强调它们的作用。

1. MatInputModule
2. MatFormFieldModule
3. ReactiveForms模块

前两个用于角度材料。许多不熟悉Angular Material的人会本能地遇到其中之一，而没有意识到构建表格需要同时使用这两种方法。

那么它们之间有什么区别呢？

MatFormFieldModule包含Angular Material提供的所有不同类型的表单字段。通常，这更多是用于表单字段的高级模块，而MatInputModule专门用于“输入”字段类型，与选择框，单选按钮等相反。

上面列表中的第三项是Angular的反应形式模块。反应形式模块负责大量的引擎盖下的Angular爱。如果要使用Angular，我强烈建议您花一些时间阅读Angular Docs。他们有您的所有答案。构建应用程序很少不涉及表格，而且您的应用程序经常涉及反应式表格。因此，请花时间阅读这两页。

Angular Docs：反应形式

Angular Docs：反应形式模块

当您入门时，第一个文档“ Reactive Forms”将是您功能最强大的武器，而当您进入Angular Reactive Forms的更高级应用程序时，第二个文档将是您功能最强大的武器。

记住，这些需要直接导入到您组件的模块中，而不是您正在使用它们的组件中。如果我没记错的话，在Angular 2中，我们将整个Angular Material模块集导入了我们的主app模块，然后导入了我们直接需要每个组件。当前的方法使IMO效率更高，因为如果仅使用少数几个角材料模块，则可以保证导入它们。

我希望这可以为使用Angular Material建立表单提供更多的见识。

如果以上所有主要代码结构/配置答案都不能解决您的问题，则还需要检查一件事：确保您没有以某种方式使<input>标签无效。

例如，我在自动闭合斜杠mat-form-field must contain a MatFormFieldControl后不小心放入required属性后收到了相同的错误消息/，这实际上使我的无效<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 must contain a MatFormFieldControl错误，则可能会收到该错误。无论如何，这只是调试时要寻找的一件事。

如果在我的情况下，只有字段中的垫子中的垫子幻灯片是我遇到的唯一元素，则可能会发生相同的错误

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

如果您在“ <mat-form-field> 简单”解决方案中有多个属性是将幻灯片切换开关移动到根目录，则可能会发生这种情况

您可以尝试遵循本指南并实现/提供自己的MatFormFieldControl

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

例如。

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

MatRadioModule无法在MatFormField中使用。该文件说，

当您尚未向窗体字段添加窗体字段控件时，会发生此错误。如果您的表单字段包含本机或元素，请确保已向其添加matInput指令并导入了MatInputModule。可以用作表单域控件的其他组件包括 <mat-select>，<mat-chip-list>以及您创建的任何自定义表单域控件。

在我的情况下，在输入元素上遗漏了“ onChanges（）”的圆括号之一，因此显然根本没有呈现输入元素：

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

一种解决方案是将材料表单字段包装在自定义组件中并ControlValueAccessor在其上实现接口。除了内容投影外，效果几乎相同。

请参阅Stackblitz上的完整示例。

我用FormControl（反应形式）内CustomInputComponent，但FormGroup还是FormArray，如果你需要一个更复杂的表单元素应该工作了。

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>

您matInput 在输入标签中缺少指令。

您需要将MatInputModule导入到app.module.ts文件中

从'@ angular / material'导入{MatInputModule};

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

角9+ ...材料9+

我注意到3个错误可能会引起相同的错误：

1. 确保已在要导入组件的app.module或module.ts中导入了MatFormFieldModule和MatInputModule（对于嵌套模块）
2. 当您将材料按钮或复选框包装在垫子形式字段中时。看到可与垫外形字段被包装材料的组件的列表垫外形场
3. 当您未能在标签中包含matInput时。即<input matInput type =“ number” step =“ 0.01” formControlName =“ price” />

就我而言，我对此进行了更改：

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

对此：

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

将matInput指令添加到输入标签是为我修复了此错误的原因。

您可能错过了导入MatInputModule

注意 当我们在“提交”按钮周围使用“ mat-form-field”标签时，有时会发生错误，例如：

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

所以请不要在“提交”按钮周围使用此标签

您可以在mat-form-field标签内设置外观=“ fill”，它对我有用

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

在component.ts文件中使用提供程序

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

新的更新的MatInput模块导入为：

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

根据Angular Materials API

我有同样的问题

问题很简单

只有您必须将两个模块导入到您的项目中

MatFormFieldModule MatInputModule

由于注释元素，我遇到了相同的问题，如下所示。

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

表单字段应具有元素！（例如，输入，文本区域，选择等）