Angular react 形式的 css 样式需要触摸表单并且无效

Question

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

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

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

Answer 1

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

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