Angular Material 6表单样式不显示及mat-form-field报错求助

我仔细看了你的代码，发现两个核心问题导致了当前的错误和样式失效：

1. 缺失MatInputModule导入 #

matInput指令（也就是让input、textarea拥有Material样式的核心指令）是定义在MatInputModule中的。你当前的模块只导入了MatFormFieldModule和MatSelectModule，没有导入这个关键模块，这就导致mat-form-field无法识别内部的输入控件，进而抛出mat-form-field must contain a MatFormFieldControl错误，同时样式也无法正常渲染。

2. 动画模块互斥冲突 #

你同时导入了BrowserAnimationsModule和NoopAnimationsModule，这两个模块是完全互斥的：

• BrowserAnimationsModule是启用Angular动画的核心模块，Material组件的样式、交互效果都依赖它；
• NoopAnimationsModule是用来禁用所有动画的，它会覆盖BrowserAnimationsModule的功能，直接导致Material组件的样式异常。

具体修复步骤： #

第一步：修正TS模块代码

更新@NgModule的配置：

• 新增MatInputModule的导入；
• 删除NoopAnimationsModule，仅保留BrowserAnimationsModule；
• 补充你遗漏的模块类定义export class AppModule { }（Angular必须识别这个类才能加载模块）。

修改后的完整模块代码：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatToolbarModule} from "@angular/material/toolbar";
import {MatStepperModule} from '@angular/material/stepper';
import {MatButtonModule} from '@angular/material/button';
import {MatTabsModule} from '@angular/material/tabs';
import {MatIconModule} from "@angular/material/icon";
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import {MatInputModule} from '@angular/material/input'; // 新增导入

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 仅保留启用动画的模块
    MatToolbarModule,
    MatStepperModule,
    MatButtonModule,
    MatTabsModule,
    MatIconModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule // 添加到导入列表
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 补充模块类定义

第二步：重启开发服务器

修改模块导入后，建议重启ng serve命令，确保新的模块配置被Angular正确加载。

完成以上操作后，你的表单控件应该能正常显示Material的样式，同时那个报错也会消失。

内容的提问来源于stack exchange，提问作者Javier Galera