Angular响应式表单触碰后无效状态的CSS样式设置问询

解决方法 #

Angular会自动为响应式表单的控件内置多组状态类，你只需要调整CSS选择器，加上「用户已操作」对应的状态类限制即可。

你可以根据自己的需求选择对应的选择器：

• 如果希望用户点击过输入框、失去焦点后才触发错误样式，使用touched状态：

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

• 如果希望用户只要修改过输入框内容，不管有没有失去焦点都触发错误样式，使用dirty状态：

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

• 如果需要两种场景都覆盖，同时还要兼容表单提交后自动显示所有错误的需求，可以写成：

/* 已触碰/已修改时无效显示红框 */
input.ng-invalid.ng-touched,
input.ng-invalid.ng-dirty,
/* 表单提交后所有无效项显示红框 */
form.ng-submitted input.ng-invalid {
  border: 1px solid red;
}

相关状态类说明 #

Angular表单控件的核心状态类你可以按需组合使用：

• ng-untouched / ng-touched：标识控件是否从未失去过焦点
• ng-pristine / ng-dirty：标识控件的内容是否从未被修改过
• ng-valid / ng-invalid：标识控件当前内容是否符合校验规则
• 表单提交后，<form>元素会自动被添加ng-submitted类

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