javascript - Angularjs - 字段无效时突出显示字段

Question

我是 Angular 的新手，想知道在验证失败时如何突出显示表单字段。

我创建了一个小提琴来说明我所追求的。

任何帮助表示赞赏。

     <p>
        <label for="name">User:</label>
        <input type="text" name="name" ng-model="name"
               required  ng-minlength="5" ng-maxlength="32">
    <span ng-show="register.name.$error.required" class="err">
        Required</span>
    <span ng-show="register.name.$error.minlength" class="err">
        Minimum 5 characters</span>
    <span ng-show="register.name.$error.maxlength" class="err">
        Maximum 32 characters</span>
    </p>

Answer 1

在您的情况下，您可以尝试 ng-class：

<input type="text" ng-class="{highlight:register.name.$error.required || register.name.$error.minlength || register.name.$error.maxlength}" name="name" ng-model="name"
                   required  ng-minlength="5" ng-maxlength="32">

演示

另一个解决方案是在这些类上设置样式：

ng-valid
ng-invalid
ng-pristine
ng-dirty

Angular 根据当前的验证状态自动切换这些类。以下是突出显示无效输入的演示：

input.ng-invalid { 
    background:#F84072;
    border: 2px red solid;
}

演示