Question

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

我注意到大多数验证都是在DOM中完成的 - 请参阅此处：https://scotch.io/tutorials/angularjs-form-validation

但是，我想避免使用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>

到目前为止，我的代码是JSFIDDLE

基本上当输入无效时 - 将类添加到fieldset。如果输入有效，则将class添加到fieldset。

Answer 1

从角度1.3.x他们提出了ng-messages，我想你应该试试这个。使用它的好处是，如果您的输入包含多个错误，它将显示适当的错误。将您的类添加到验证div

以下示例检查所需数量和号码。

                      <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-messages注入角度模块

Answer 2

我也正在寻找这个问题的解决方案，但我现在选择的（懒惰）答案只是让某些指令确定该元素是有效还是无效，然后让它角度处理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;
}

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

2 个答案: