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">

DEMO

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

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

Angular根据当前验证状态自动切换这些类.以下是高亮无效输入的演示:

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

DEMO