Angular Material mat-form-field 修改工具栏的样式答案

【问题标题】：Angular Material mat-form-field modifies styling of toolbarAngular Material mat-form-field 修改工具栏的样式
【发布时间】：2022-01-09 21:41:34
【问题描述】：

尝试在我有mat-toolbar 元素的组件中创建一个输入字段，不幸的是插入mat-form-field 元素会改变mat-toolbar 的样式。

我无法诊断问题出在哪里（也许如果你碰巧发现解释一下你是怎么做的会是个好主意），也无法诊断出如何克服它。

这是一个 stackblitz 缩小示例。要使错误出现 - 取消注释 /test-comp.component.html 中的第 11 行。 Link to StackBlitz.

注意：我知道可以使用简单的边框代替 border-box 类，但在成熟的应用程序中，它有不同的用途，我无法用边框复制。

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

您使用的mat-form-field 没有任何表单字段控件，因此出现了问题。您可以尝试添加任何表单字段控件，它会起作用。例如，我们可以将<input> 元素与matInput 指令一起添加为：

<mat-form-field>
  <input matInput placeholder="Input">
</mat-form-field>

我们还必须在 app.module.ts 中导入适当的模块：

import { MatInputModule } from '@angular/material/input';
...
 imports: [
  ...
  MatInputModule
 ]

我无法诊断问题出在哪里（也许如果你碰巧发现解释一下你是怎么做的会是个好主意），也无法诊断出如何克服它。

我去了 Stackblitz，取消了该行的注释，并对输出感到惊讶。由于我没有使用过 Angular Material Components，因此我尝试在 Devtool Elements 选项卡中研究样式。我没有看到风格有什么问题。我打开控制台，它就在那里：

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

这给了我一个线索，即 mat-form-field 应该在其中包含某种形式的控件。我去了docs，发现了这个：

当您没有向表单域添加表单域控件时会发生此错误。如果您的表单字段包含本机或元素，请确保您已将 matInput 指令添加到其中并已导入 MatInputModule。可以充当表单域控件的其他组件包括 <mat-select>、<mat-chip-list> 以及您创建的任何自定义表单域控件。</mat-chip-list></mat-select>

PS：我还能够在控制台中看到以下警告。所以你可能也需要添加主题。

找不到 Angular Material 核心主题。大多数 Material 组件可能无法按预期工作。有关更多信息，请参阅主题指南：https://material.angular.io/guide/theming

【讨论】：