AngularJS |使用指令添加/删除类

我是AngularJS新手，需要关于如何在表单元素上切换类（如果输入有效或无效）的帮助

我注意到，大多数验证都是在DOM中完成的-请参见此处：

但是，我希望避免使用dom来处理验证。我想使用自定义指令来处理基于验证规则的输入是否有效

以下是迄今为止我的HTML/Angular标记：

<fieldset ng-class="{error: loginForm.username.$invalid}">  
            <div class="form-input-error" ng-show="loginForm.$error">
                Username is too short.
            </div>
            <div class="vfnz-fieldWrapper">
                <input 
                    type="text" 
                    id="username" 
                    ng-model="username"
                    class="vfnz-input--text" 
                    placeholder="Username" 
                    ng-minlength="3" 
                    ng-maxlength="8" />
                <label for="name" class="vfnz-input-label">
                    Username
                </label>
            </div>
        </fieldset>

用户名太短。
用户名

这是我迄今为止的一段代码

---

基本上，当输入无效时，将类添加到字段集。如果输入有效，则将类添加到字段集。

从angular 1.3.x中，他们给出了ng消息，我认为您应该试试这个。使用它的优点是，如果您的输入包含多个错误，它将显示相应的错误

下面的示例检查所需的和编号

                      <form name='cliForm'>
                        <input  ng-model="vm.formData.newCreditLimit" type="text" name="changeCreditLimit" ng-pattern="/^[0-9]{1,15}$/" required />
                        <div class="highlight" ng-messages="cliForm.changeCreditLimit.$error" ng-if="cliForm.$submitted">
                            <div ng-message="required">* This field is required!</div>
                            <div ng-message="pattern">* Not a valid number!</div>
                        </div>
                    </form>

*此字段为必填字段！
*不是一个有效的数字！

---

在使用之前，请包含ng messages脚本，因为它位于不同的模块中，并将ng消息注入您的angular模块

我也在寻找解决此问题的方法，但我现在选择的（惰性）答案只是让一些指令确定元素是否有效，让angular来处理css类。我所做的只是将ff添加到我的css文件中：

.ng-invalid {
    border-color: #e51c23;
    color: #e51c23 !important;
 }

.ng-error {
    border-color: #e51c23;
    color: #e51c23 !important;
}

.ng-valid {
    border-color: #4CAF50;
    color: #4CAF50 !important;
}