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

Angular bootstrap validation done unobtrusively

本文关键字：不显眼 验证      更新时间：2023-09-26

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

  <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 }"来实现相同的目的吗？ 非常感谢

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

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

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

input.ng-invalid {
    border: 1px solid red;
}
相关文章：