Question

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

我创建了一个fiddle来说明我之后的情况。

感谢任何帮助。

     <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

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

1 个答案: