javascript - 不引人注意地完成 Angular Bootstrap 验证

Question

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

  <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 }" 来达到同样的目的吗？非常感谢

Answer 1

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

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

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

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

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