如果将mat from field中的mat滑动作为唯一的元素，也会发生相同的错误 在我的情况下，我有

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

如果<mat-form-field>中有几个属性，就可能发生这种情况 简单的解决方案是将滑动开关移动到根目录

如果你在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>

我收到了同样的错误消息，但在我的情况下，上述内容都不能解决问题。解决方案就在“标签”中。你需要添加'mat-label'和把你的输入'label'标签也。我的问题的解决方案是在下面的片段:

  <mat-label>
     Username
  </mat-label>
  <label>
    <input 
       matInput 
       type="text" 
       placeholder="Your username" 
       formControlName="username"/>
  </label>

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

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

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

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

在我的例子中，它是TranslocoService服务，它可能会打乱init之后的初始化。

我的代码是这样的:

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        *transloco="let t"
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        placeholder="{{t('customer.management.customers.search.customer.name')}}">
</mat-form-field>

我把它改成了这样。

<mat-form-field
    class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
    <mat-icon
        class="icon-size-5"
        matPrefix
        [svgIcon]="'heroicons_solid:search'"></mat-icon>
    <input
        (keyup.enter)="searchByCustomerName()"
        matInput
        [formControl]="searchInputControl"
        [autocomplete]="'off'"
        [placeholder]="searchBarPlaceHolder">
</mat-form-field>

占位符值来自组件中的一个字段。 经过这种修改，错误就消失了。如果你正在使用transloco，你可以试试这个。

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

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

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

更多信息请点击这里。