单击带有angularjs的“提交”按钮后，如何在“无效输入框”中显示红色边框

Question

我尝试使用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; 
}

但是，如果任何输入框是空的并且未触及，那么第一次如果有人点击“提交”＃39;按钮，它会显示错误消息但不显示任何红色边框：

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

Here is the plunker work

Answer 1

使用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;
}

Working Plunkr

希望这可以帮到你。感谢。

Answer 2

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

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

编辑：

要仅在提交后显示红色边框，您可以使用条件为ng-class的属性：createLogin。$ submitted