我在一次Karma测试中遇到了问题

正如大多数答案已经指出的那样，缺失的模块会导致问题，它们也必须重新导入到Karma TestBed中。此外，似乎我们还需要导入BrowserAnimationsModule来使一切正常工作。

在我下面的代码中，我注释了一些可能对你没用的模块，但其他4个导入肯定会有帮助!

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

未捕获错误:mat-form-field必须包含MatFormFieldControl。

此错误发生在导入中遗漏'MatInputModule'时，

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

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

在模块中导入MatInputModule。t文件将有助于摆脱这个问题。

你可以在你的mat-form-field标签中设置appearance="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>

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

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

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

更多信息请点击这里。

这里引用官方文件:

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

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

你需要将MatInputModule导入到app.module.ts文件中 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
  ],