错误：mat-form-field 必须包含 MatFormFieldControl 并且表单字段的样式不正确

Question

我正在尝试为我的应用程序构建一个表单。这些字段是可见的，但没有按照 Angular Material 的规定显示。另外，mat-toolbar 组件显示不正常，但在另一个页面中显示正常。

我在我的 component.ts 中导入了

MatInputModule

和

MatFormFieldModule

，并且所有输入字段都将 matInput 作为属性。

在开发人员控制台中，我收到了与字段一样多的错误，所有错误都显示相同的错误文本：

错误：mat-form-field 必须包含 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>

这是我的组件.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) {

  }
}

欢迎任何帮助，谢谢。

Answer 1

我忘记将

import {MatSelectModule} from '@angular/material/select';

添加到我的

component.ts

及其导入中。

我还必须编辑这段代码

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

到

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

希望这会对一些人有所帮助:)

干杯！