Css 如何使用angularjs单击提交按钮后在无效输入框显示红色边框

我正在尝试使用angularjs进行表单验证。不管怎样我都能应付。现在，我试图在输入框无效时添加一个红色边框。我可以通过添加以下css来实现这一点：

/*Show red border if kept the input empty after touching*/
.ng-touched.ng-invalid-required {
    border-color: red;
}
/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
  border-color: red;
}
/*Show normal border color when typed in for the first time*/
.ng-untouched.ng-invalid {
    border-color: #ccc; 
}

但是，第一次如果任何输入框为空且未被触碰，并且当时如果有人单击“提交”按钮，则会显示错误消息，但不会显示任何红色边框：

我不明白在这个场景中我应该在CSS中定义哪个类。如果有人单击“提交”按钮，保持输入框为空且未被触动，我如何使输入框带有红色边框

---

.

您应该更改最后一个css定义以匹配：

.ng-pristine {
    border-color: red;  
}

编辑：

---

要仅在提交后显示红色边框，可以使用一个属性，该属性的条件为：createLogin.$submitted

使用

ng submitted

在css中使用嵌套类

/*Show red border if kept the input empty after touching*/
.ng-touched.ng-invalid-required {
    border-color: red;
}
/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
  border-color: red;
}
/*Show normal border color when typed in for the first time*/
.ng-untouched.ng-invalid {
    border-color: #ccc; 
}
.ng-submitted input.ng-invalid{
    border-color: red;
}

---

希望这能对你有所帮助。谢谢。

我无法重现该问题——我打开了plunkr并单击了提交，我看到了带有红色边框的框——这不是您想要的吗？如果您不触摸任何输入并单击提交，红色边框将不会出现。这就是问题所在，我就是这么做的，但我确实看到了边界。我用的是Chrome，我不知道你为什么会看到。但是，我在每个浏览器上都看到相同的结果。我上传了我脸上的截图，我编辑了它来改变颜色。或者我误解了你的问题？问题是：如果有人“不要触摸输入框”和“单击提交按钮”，输入框应该是红色的。目前，这个场景中只显示红色消息框（帖子的屏幕截图），但我也需要这个场景中的红色边框输入框。问题仍然存在（如屏幕截图）Plunkr@user1896653您不希望在窗体未被触动且脏的时候收到这些消息吗？这种行为应该是什么？如果不填写任何字段，开始验证是什么？不，我想要消息。问题是当表单提交且未被触及时，我希望输入字段处有红色边框。目前，它只显示这个场景中的消息（我已经发布了这个场景的截图）。有了这些信息，我想输入框也会是红色边框的。看，在点击提交按钮之前，当输入变脏时，它会被红色的消息包围。仅对于已提交且未触及的邮件，它不会获得红色边框，而是“必需的邮件”。对于那些“必需的消息”，我希望输入框也有红色边框。@user1896653检查我的更新答案&plunkr.。如果有什么悬而未决，请告诉我接受我的编辑，它将结束：）谢谢你的帮助。