需要触摸和无效表单的角度反应形式的 css 样式答案

【问题标题】：css styling for angular reactive form requiring form to be touched and invalid需要触摸和无效表单的角度反应形式的 css 样式
【发布时间】：2021-07-26 13:12:26
【问题描述】：

我正在使用响应式表单来允许用户更改他们的密码。我想设置输入框的样式，以便在表单无效或出现错误时向用户显示。

input.ng-invalid {
  border: 1px solid red;
}

问题在于，这甚至在表单被触摸之前就显示出来了。我希望这个 CSS 仅在表单被触摸后应用。不确定如何在 CSS 中实现这种行为。

【问题讨论】：

标签： css angular reactive-forms

【解决方案1】：

如果您只想在错误被触摸时显示错误，请使用名为 ng-touched 的应用程序类

input.ng-touched.ng-invalid {
  border: 1px solid red;
}

【讨论】：

不敢相信这么简单！我确定我已经尝试过了，但显然没有，谢谢！