Angular 当页面中使用mat form字段时，角度材料侧导航抽屉锁定

我有一个小测试应用程序，它是根据web上的教程创建的，其中我定义了一个带有3个链接的SideNav抽屉、一个带有标题的toobar和一个带有3个页面（组件）的路由器出口

下面是“main nav.component.html”：

菜单
菜单
首页
第二页
第三页
菜单
标题

它可以很好地处理简单的页面。但在一页中，我尝试了以下方法：

<mat-form-field class="search-form">
    <input matInput placeholder="Search Picture" type="text">
</mat-form-field>
<button button="submit" mat-raised-button color="primary">Search</button>
<br>

<div fxLayout="row wrap" fxLayoutGap="16px grid" fxLayoutAlign="space-evenly">
    <div fxFlex="0 1 calc(33.3% - 16px)" *ngFor="let picture of pictures" >
    <mat-card class="card-picture">
        <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
            <span fxFlex="80%" style="font-weight: normal; font-size: medium;">{{picture.title}} </span>
            <mat-icon fxFlex="10%">mode_edit</mat-icon>
            <mat-icon fxFlex="10%">delete</mat-icon>
        </mat-card-title>
        <img mat-card-image [src]="picture.img">
    </mat-card>
    </div>
</div>

搜寻


{{picture.title}
编辑模式
删除

当我点击这个“第二页”的链接时，页面显示出来，但是抽屉卡住了。它不再切换。我可以点击我想要的地方，包括在“菜单”图标上，什么都不会发生。如果我单击指向另一个页面的链接，它将再次开始工作

我试着解释一下，似乎是“mat form字段”导致了这个问题。如果我把它注释掉，它就会正常工作

---

任何人都可以向我指出导致这种行为的原因，以及如何在同一应用程序中使用“mat form”字段和抽屉？

感谢robbieAreBest提出的问题，它为我指出了正确的位置。控制台正在报告错误：

Error: mat-form-field must contain a MatFormFieldControl.

我发现我在

app.module.ts

中缺少导入：

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

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

---

您的控制台中有任何错误吗？

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

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