Angular响应式表单输入框无效状态着色问题求助

核心问题排查 #

你的代码逻辑本身没问题，但输入框未显示错误颜色，大概率是缺少必要的Material模块或未引入Material主题导致的，以下是分步解决方案：

1. 补全Material模块导入 #

mat-form-field组件依赖MatFormFieldModule，你只导入了MatInputModule，需在app.module.ts中补充：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    // 其他已导入模块...
    MatFormFieldModule,
    MatInputModule
  ]
})
export class AppModule { }

2. 引入Angular Material主题 #

Material的错误状态颜色由主题控制，未引入主题时默认样式不会生效。打开全局样式文件（如src/styles.scss），添加预构建主题导入：

// 可选主题：indigo-pink.css / deeppurple-amber.css / pink-bluegrey.css / purple-green.css
@import '@angular/material/prebuilt-themes/indigo-pink.css';

3. 验证控件状态是否正确 #

你的FormControl配置了Validators.required，当输入框失焦（touched为true）且为空（invalid为true）时，组件应自动触发错误样式。可在模板中临时添加调试代码确认状态：

{{ firstName.status }} - {{ firstName.touched }}

若显示INVALID - true，说明状态触发正常，此时输入框边框应自动变为主题的警告色（默认红色）。

自定义错误颜色（非hack方式） #

若需要修改默认错误颜色，推荐通过Material主题定制实现，而非硬改组件样式：

方式1：修改主题警告色

在styles.scss中自定义主题调色板：

@import '@angular/material/theming';

// 自定义调色板，修改warn色为你需要的错误颜色
$custom-primary: mat-palette($mat-indigo);
$custom-accent: mat-palette($mat-pink);
$custom-warn: mat-palette($mat-red, 600); // 调整色阶或替换自定义色值
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

// 应用自定义主题
@include angular-material-theme($custom-theme);

方式2：针对性修改样式类

直接针对Material暴露的错误状态样式类修改（官方允许的定制方式）：

// 修改错误状态下的输入框边框颜色
.mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline-thick {
  color: #ff5252;
}

// 修改错误状态下的输入框文本和光标颜色
.mat-form-field-invalid .mat-input-element {
  color: #ff5252;
  caret-color: #ff5252;
}

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