Angular 15升级后MatFormField appearance="standard"类型匹配报错

问题原因 #

Angular Material 15版本对mat-form-field的appearance属性做了破坏性变更：移除了"standard"这个可选值，当前合法的外观类型仅为'fill'、'outline'和'legacy'。

修复步骤 #

• 替换属性值：将所有使用appearance="standard"的代码，根据需求替换为以下合法值之一：
  • appearance="fill"：Angular Material 15的默认外观，字段带有填充背景
  • appearance="outline"：带边框的字段外观
  • appearance="legacy"：保留旧版（Angular Material 14及之前）的standard外观样式
• 类型检查修复：如果是TypeScript类型报错，确保模板或组件代码中传入的外观值属于MatFormFieldAppearance类型的合法枚举值，避免硬编码过时的字符串。

代码示例 #

原错误代码 #

<mat-form-field appearance="standard">
  <mat-label>用户名</mat-label>
  <input matInput placeholder="请输入用户名">
</mat-form-field>

修改后代码（保留旧版样式） #

<mat-form-field appearance="legacy">
  <mat-label>用户名</mat-label>
  <input matInput placeholder="请输入用户名">
</mat-form-field>

修改后代码（使用新版默认样式） #

<mat-form-field appearance="fill">
  <mat-label>用户名</mat-label>
  <input matInput placeholder="请输入用户名">
</mat-form-field>

内容的提问来源于stack exchange，提问作者Luigi Woodhouse