首页 文章

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

提问于
浏览 次
2

我正在尝试使用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 .

css angularjs

2 回答

  • 4

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

    希望这可以帮到你 . 谢谢 .

    回复于
  • 0

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

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

    编辑：

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

    回复于

相关问题