Angular Material表单报错：mat-form-field需包含MatFormFieldControl及样式异常

问题情况 #

正在构建Angular应用表单，字段可见但未按Angular Material预期样式渲染，mat-toolbar组件样式异常（其他页面正常）。已在组件中导入MatInputModule和MatFormFieldModule，所有输入字段都添加了matInput属性，但控制台每个字段都报错：Error: mat-form-field must contain a MatFormFieldControl。

模板代码 #

<mat-toolbar>
  <span class="flexExpand"></span>
  <button mat-raised-button color="primary" routerLink="/creation-utilisateur" style="margin-right: 10px;">Créer un utilisateur</button>
</mat-toolbar>

<h1>Importez vos données</h1>
<h2>Copiez-collez les utilisateurs à importer ainsi que leurs informations depuis un fichier tableur.</h2>

<mat-form-field style="width: 100%">
  <mat-label for="firstName">Prénom</mat-label>
  <input type="text" matInput id="firstName" [(ngModel)]="user.firstName" placeholder="Prénom...">
</mat-form-field>

<mat-form-field>
  <mat-label for="lastName">Nom</mat-label>
  <input type="text" matInput id="lastName" [(ngModel)]="user.lastName" placeholder="Nom...">
</mat-form-field>

<mat-form-field>
  <mat-label for="email">Email perso</mat-label>
  <input type="email" matInput id="email" [(ngModel)]="user.email" placeholder="Email perso...">
</mat-form-field>

<mat-form-field>
  <mat-label for="microsoftEmail">Email Microsoft</mat-label>
  <input type="text" disabled matInput id="microsoftEmail" [value]="(user.firstName | lowercase) + '.' + (user.lastName | lowercase) + '@esa-montpellier.fr'" placeholder="Prénom...">
</mat-form-field>

<mat-form-field>
  <mat-label for="role">Rôle</mat-label>
  <select matInput [(ngModel)]="user.role">
    <option *ngFor="let role of roles"
      [value]="role"
      [attr.selected]="user.role==role ? true : null">{{role}}</option>
  </select>
</mat-form-field>

  <button mat-raised-button color="primary" (click)="createUser(this.user)">Importer</button>
  <button mat-raised-button color="warn" (click)="cancel()" style="margin-left: 10px;">Annuler</button>

Component.ts代码 #

import {Component} from '@angular/core';
import {MatTableModule} from '@angular/material/table';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatToolbarModule} from '@angular/material/toolbar';
import {FormsModule} from '@angular/forms';
import { Location } from '@angular/common';
import {User} from '../../../models/user';
import {CommonModule} from '@angular/common';

const ELEMENT_DATA: User[] = [{
  id: 0,
  firstName: "*",
  lastName: "*",
  email: "p.***@gmail.com",
  emailMicrosoft: "***@coxidev.com",
  role: "admin",
  class: "GPME24"
},{
  id: 1,
  firstName: "*",
  lastName: "*",
  email: "p.*@gmail.com",
  emailMicrosoft: "*@coxidev.com",
  role: "student",
  class: "GPME24"
},{
  id: 2,
  firstName: "*",
  lastName: "*",
  email: "p.*@gmail.com",
  emailMicrosoft: "*@coxidev.com",
  role: "prof",
  class: "GPME24"
}];

@Component({
  selector: 'app-users-create',
  templateUrl: './create.component.html',
  styleUrl: './create.component.css',
  standalone: true,
  imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTableModule, MatButtonModule, MatToolbarModule]
})

export class UserCreateComponent {
  roles: string[] = ["Elève", "Administrateur", "Formateur"];
  classes: string[] = ["GPME 24", "GPME 25", "NDRC 24", "NDRC 25", "RDC 24", "RDC 25"];
  user: User = {id: -1, firstName: "", lastName: "", email: "", emailMicrosoft: "", role: "", class: ""};

  constructor(private location: Location) { }

  cancel() {
    this.location.back();
  }

  createUser(user: any) {

  }
}

解决方案 #

• 修复下拉框组件使用错误：Angular Material的下拉框不能用原生<select>搭配matInput，必须使用mat-select组件，替换后的下拉框代码如下：

  <mat-form-field>
    <mat-label for="role">Rôle</mat-label>
    <mat-select [(ngModel)]="user.role">
      <mat-option *ngFor="let role of roles" [value]="role">
        {{role}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  

• 添加MatSelectModule导入：在组件的imports数组中添加MatSelectModule，同时移除未使用的MatTableModule，修改后的imports部分：

  imports: [
    CommonModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatButtonModule,
    MatToolbarModule,
    MatSelectModule // 新增
  ]
  

• 确认全局主题引入：检查全局样式文件（如src/styles.css）是否导入了Angular Material主题，若未导入则添加：

  @import "@angular/material/prebuilt-themes/indigo-pink.css";
  

内容的提问来源于stack exchange，提问作者Pierrick Martellière