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

【问题标题】：How to show red border at Invalid Input Box after clicking Submit button with angularjs单击带有angularjs的提交按钮后如何在无效的输入框中显示红色边框
【发布时间】：2015-04-13 11:07:41
【问题描述】：

我正在尝试使用 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 中为这种情况定义哪个类。如果有人单击“提交”按钮保持输入框为空且未触及，我如何使输入框变为红色边框？

Here is the plunker work.

【问题讨论】：

我无法重现该问题——我打开 plunkr 并单击提交，我看到带有红色边框的框——这不是您想要的吗？
如果你不触摸任何输入并点击提交，红色边框不会出现。这就是问题
这就是我所做的，但我确实看到了边界。我正在使用 Chrome。
我不确定您为什么会看到这种情况。但是，我在每个浏览器上都看到了相同的结果。我上传了我遇到的截图

标签： css angularjs

【解决方案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

希望这可以帮助你。谢谢。

【讨论】：

Plunkr 上的问题仍然存在（如屏幕截图）
@user1896653 您不想在表单未触及且脏的时候收到这些消息？应该是什么行为？什么是初始验证，不填写任何字段？
不，我想要这些消息。问题是当表单提交并且未触及时，我想要输入字段的红色边框。目前，它只显示这种情况下的消息（我已经发布了截图）。对于这些消息，我希望输入框也将带有红色边框。看，在点击提交按钮之前，当输入脏时，它会变成红色，并带有消息。仅对于已提交和未触及的，它没有红色边框，而是“必填消息”。对于那些“必填消息”，我也希望在输入框上有红色边框。
@user1896653 检查我更新的答案和 plunkr ..如果有任何待处理，请告诉我
接受我的编辑，它会结束 :) 感谢您的帮助。

【解决方案2】：

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

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

编辑：

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

【讨论】：

我已对其进行了编辑以更改颜色。还是我误解了你的问题？
问题是：如果有人'不要触摸输入框'和'单击提交按钮'，输入框应该是红色的。目前，这个场景只显示红色消息框（帖子截图），但我也需要这个场景的红色边框输入框。