用于角度反应表单的 CSS 样式，要求表单被触摸且无效

Question

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

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

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

Answer 1

如果您只想在触摸时显示错误，请使用恰当命名的

ng-touched

类

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