角度引导验证不显眼地完成答案

【问题标题】：Angular bootstrap validation done unobtrusively角度引导验证不显眼地完成
【发布时间】：2017-06-08 13:28:41
【问题描述】：

我目前正在使用规定的方法验证表单：

  <form name="userForm">
    <div class="form-group" ng-class="{ 'has-error': userForm.email.$invalid }" >
      <input type="email" class="form-control" name="email" ng-model="user.email" required />
    </div>
  </form>

虽然这不是世界末日，但我想知道是否有一种不那么突兀的方式来做到这一点。我已经说明该字段是必需的，并且 angular 将根据其状态使用 css 类绘制元素。我可以使用 CSS 而不是使用ng-class="{ 'has-error': userForm.email.$invalid }" 来达到相同的目的吗？非常感谢

【问题讨论】：

无效元素将有 ng-invalid 类 + 其他验证类。
是的，它还会添加其他内容，例如 ng-invalid-max，具体取决于使其无效的内容。我只是想在 CSS 中学习这一点，而不是到处使用 ng-class

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

您可以在 CSS 中设置 Angular 类的样式。

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

.ng-valid {
    border: 1px solid green;
}

如果您只想将其应用于输入而不是在表单周围创建边框，您也可以使用以下内容：

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

【讨论】：