禁用不需要验证在AngularJS（条件确认） [英] Disable Unwanted Validation in AngularJS (Conditional Validation)

问题描述

我有一个需要验证的一种形式。

I have a form that needs to be validated.

该表单包含许多地方，其中一些被默认为禁用。每个字段中的值是正确的，但它是对我的验证指令。例如，当它的禁用它应该包含0，但是，当它的可编辑它应包含别的东西。无论如何，我附上禁用指令给他们，并把它们记录下来。

The form contains many parts, and some of them are disabled by default. The value in each field is correct, but it's against my validation directives. For example, when it's disable it should contain 0, but when it's editable it should contains something else. Anyway I attach a disable directive to them, and put them down.

当我提交表单（使用角度范围功能），如果（$ scope.sarfaslForm $无效。） - >返回true。它说，我有两个无效场当我检查 $ scope.sarfaslForm。$误差列表。

When i submit my form (using angular scope function), if ($scope.sarfaslForm.$invalid) --> returns true. It says I have two invalid fields when I check the $scope.sarfaslForm.$error list.

这个博客我实现了我的验证：
<一href=\"http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/\">http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/

following this blog i implement my validations: http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/

和下面的<一个href=\"http://stackoverflow.com/questions/21621192/validation-of-invisible-and-disabled-fields-in-angularjs\">this螺纹，我创建了一个directived无视我的一些禁用的控制方式：

And following this thread, I create a directived to ignore some of my disabled control:

我做出这个指令一个微小的变化：

I made a minor change to this directive:

.directive('hsDisableValidation', function() {
    return {
        require: '^form',
        restrict: 'A',
        link: function(scope, element, attrs,form) {
            var control;

            scope.$watch(function() {
                return scope.$eval(attrs.hsDisableValidation);
            }, function(value) {
                if (!control) {
                    control = form[element[0].name];
                    //form[element.find("input").attr("name")];
                }
                if (value === false) {
                    form.$addControl(control);
                    angular.forEach(control.$error, function(validity, validationToken) {
                        form.$setValidity(validationToken, !validity, control);
                    });
                } else {
                    form.$removeControl(control);
                    //In Here: I tried to $setValidity of controls to true, Remove Error List, and Remove Validator Function, but these things didn't worked out
                }
            });
        }
    }
})

下面验证总是失败对​​我来说：
PS：由于我使用它在文本类型的字段，我没有最小值/最大值，只有最小/最大长度为。我敢肯定，这不是问题，但我包括本code，以确保。

Here the validation always failed for me: PS: Since i use it on 'text' typed field, i have no min/max value, only min/max for length. I'm sure it's not the issue, but I'm including this code to make sure.

.directive('hsMinValue', function() {
        return {
            require: 'ngModel',
            link: function (scope, elem, attr, ngModel) {

                function isLesser(value) {
                    var minVal = parseInt(attr.hsMinValue);
                    return parseInt(value) < minVal;
                }

                function validate(value) {
                    var valid = !isLesser(value);
                    ngModel.$setValidity('minValue', valid);
                    return valid ? value : undefined;
                }

                ngModel.$parsers.unshift(function (value) {
                    ngModel.$setValidity('minValue', !isLesser(value));
                    return value;
                });

                ngModel.$formatters.unshift(function (value) {
                    ngModel.$setValidity('minValue', !isLesser(value));
                    return value;
                });
            }
        }
    });

然后我保存：

saveSarfasl: function () {
                $scope.$broadcast('show-errors-check-validity');
                if ($scope.sarfaslForm.$invalid) { --> True :|
                    return;
                }
                //Stuffs
}

---

编辑：在詹姆斯的要求，我把HTML
      和视图的我的页面在这里。

<div class="clearfix">
    <form name="sarfaslForm" novalidate>
        <table class="table-condensed">
            <tbody>
                <tr>
                    <td>
                        کد سرفصل
                    </td>
                    <td>
                        <table class="table-condensed">
                            <tbody>
                                <tr>
                                    <td data-ng-if="View.FinYear.LenK != 0">
                                        کل
                                    </td>
                                    <td data-ng-if="View.FinYear.LenM != 0">
                                        معین
                                    </td>
                                    <td data-ng-if="View.FinYear.LenT1 != 0">
                                        تفضیل یک
                                    </td>
                                    <td data-ng-if="View.FinYear.LenT2 != 0">
                                        تفضیل دو
                                    </td>
                                    <td data-ng-if="View.FinYear.LenJ != 0">
                                        جزء
                                    </td>
                                </tr>
                                <tr>
                                    <td data-ng-if="View.FinYear.LenK != 0">
                                        <div class="form-group" hs-show-errors hs-show-success>
                                            <input name="CodKol" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenK}}"
                                                   class="form-control input-sm"
                                                   data-ng-model="View.Kol" data-ng-disabled="View.Level!==1"
                                                   data-ng-blur="Events.codeChanged('k')"
                                                   data-ng-change="Events.setSarfaslCod()"
                                                   hs-disable-validation="View.Level!==1"
                                                   data-ng-required="true"
                                                   hs-min-value="1" />
                                            <p class="help-block" ng-if="sarfaslForm.CodKol.$error.required">
                                                کد کل الظامی می باشد
                                            </p>
                                            <p class="help-block" ng-if="sarfaslForm.CodKol.$error.minValue">
                                                کد کل نمی تواند صفر باشد
                                            </p>
                                        </div>
                                    </td>
                                    <td data-ng-if="View.FinYear.LenM != 0">
                                        <div class="form-group" hs-show-errors hs-show-success>
                                            <input name="CodMoin" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenM}}"
                                                   class="form-control input-sm"
                                                   data-ng-model="View.Moin" data-ng-disabled="View.Level!==2"
                                                   data-ng-blur="Events.codeChanged('m')"
                                                   data-ng-change="Events.setSarfaslCod()"
                                                   hs-disable-validation="View.Level!==2"
                                                   data-ng-required
                                                   hs-min-value="1" />
                                            <p class="help-block" ng-if="sarfaslForm.CodMoin.$error.required">
                                                کد معین الظامی می باشد
                                            </p>
                                            <p class="help-block" ng-if="sarfaslForm.CodMoin.$error.minValue">
                                                کد معین نمی تواند صفر باشد
                                            </p>
                                        </div>
                                    </td>
                                    <td data-ng-if="View.FinYear.LenT1 != 0">
                                        <div class="form-group" hs-show-errors hs-show-success>
                                            <input name="CodTafzil1" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenT1}}"
                                                   class="form-control input-sm"
                                                   data-ng-model="View.Tafzil1" data-ng-disabled="View.Level!==3"
                                                   data-ng-blur="Events.codeChanged('t1')"
                                                   data-ng-change="Events.setSarfaslCod()"
                                                   hs-disable-validation="View.Level!==3"
                                                   data-ng-required
                                                   hs-min-value="1" />
                                            <p class="help-block" ng-if="sarfaslForm.CodTafzil1.$error.required">
                                                کد تفظیل یک الظامی می باشد
                                            </p>
                                            <p class="help-block" ng-if="sarfaslForm.CodTafzil1.$error.minValue">
                                                کد تفظیل یک نمی تواند صفر باشد
                                            </p>
                                        </div>
                                    </td>
                                    <td data-ng-if="View.FinYear.LenT2 != 0">
                                        <div class="form-group" hs-show-errors hs-show-success>
                                            <input name="CodTafzil2" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenT2}}"
                                                   class="form-control input-sm"
                                                   data-ng-model="View.Tafzil2" data-ng-disabled="View.Level!==4"
                                                   data-ng-blur="Events.codeChanged('t2')"
                                                   data-ng-change="Events.setSarfaslCod()"
                                                   hs-disable-validation="View.Level!==4"
                                                   data-ng-required
                                                   hs-min-value="1" />
                                            <p class="help-block" ng-if="sarfaslForm.CodTafzil2.$error.required">
                                                کد تفظیل دو الظامی می باشد
                                            </p>
                                            <p class="help-block" ng-if="sarfaslForm.CodTafzil2.$error.minValue">
                                                کد تفظیل دو نمی تواند صفر باشد
                                            </p>
                                        </div>
                                    </td>
                                    <td data-ng-if="View.FinYear.LenJ != 0">
                                        <div class="form-group" hs-show-errors hs-show-success>
                                            <input name="CodJoz" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenJ}}"
                                                   class="form-control input-sm"
                                                   data-ng-model="View.Joz" data-ng-disabled="View.Level!==5"
                                                   data-ng-blur="Events.codeChanged('j')"
                                                   data-ng-change="Events.setSarfaslCod()"
                                                   hs-disable-validation="View.Level!==5"
                                                   data-ng-required
                                                   hs-min-value="1" />
                                            <p class="help-block" ng-if="sarfaslForm.CodJoz.$error.required">
                                                کد جزء الظامی می باشد
                                            </p>
                                            <p class="help-block" ng-if="sarfaslForm.CodJoz.$error.minValue">
                                                کد جزء نمی تواند صفر باشد
                                            </p>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        عنوان سرفصل
                    </td>
                    <td ng-class="{'has-error':sarfaslForm.HsbNam.$invalid && sarfaslForm.HsbNam.$dirty}">
                        <div class="form-group" hs-show-errors hs-show-success>
                            <input name="HsbNam" type="text" data-ng-model="View.Sarfasl.HsbNam"
                                   class="form-control input-sm"
                                   data-ng-required="true" />
                            <p class="help-block" ng-if="sarfaslForm.HsbNam.$error.required">
                                نام سرفصل الظامی می باشد
                            </p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td>
                        <div class="radio" hs-show-errors>
                            <label class="control-label">
                                <input type="radio" data-ng-model="View.Sarfasl.HsbKind" name="HsbKind" data-ng-value="'00'"
                                        data-ng-required="true" />
                                زیر سطح دارد
                            </label>
                        </div>
                        <div class="radio" hs-show-errors>
                            <label class="control-label">
                                <input type="radio" data-ng-model="View.Sarfasl.HsbKind" name="HsbKind" data-ng-value="'11'"
                                       data-ng-required="true" />
                                سطح آخر است
                            </label>
                            <p class="help-block" ng-if="sarfaslForm.HsbKind.$error.required">
                                انتخاب یکی از حالات الظامی می باشد
                            </p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td>
                        <div class="radio" hs-show-errors>
                            <label class="control-label">
                                <input type="radio" data-ng-model="View.Sarfasl.Permanent" name="Permanent" data-ng-value="'1'"
                                       data-ng-required="true" />
                                حساب دائم
                            </label>
                        </div>
                        <div class="radio" hs-show-errors>
                            <label class="control-label">
                                <input type="radio" data-ng-model="View.Sarfasl.Permanent" name="Permanent" data-ng-value="'0'"
                                       data-ng-required="true" />
                                حساب موقت
                            </label>
                            <p class="help-block" ng-if="sarfaslForm.Permanent.$error.required">
                                انتخاب یکی از حالات الظامی می باشد
                            </p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td>
                        <div class="radio" hs-show-errors>
                            <label class="control-label">
                                <input type="radio" data-ng-model="View.Sarfasl.AccessFlag" name="AccessFlag" data-ng-value="0"
                                       data-ng-required="true" />
                                حساب برای همه در دسترس باشد
                            </label>
                        </div>
                        <div class="radio" hs-show-errors>
                            <label class="control-label">
                                <input type="radio" data-ng-model="View.Sarfasl.AccessFlag" name="AccessFlag" data-ng-value="1"
                                       data-ng-required="true" />
                                حساب فقط برای کاربران زیر در دسترس باید
                            </label>
                            <p class="help-block" ng-if="sarfaslForm.AccessFlag.$error.required">
                                انتخاب یکی از حالات الظامی می باشد
                            </p>
                        </div>
                    </td>
                </tr>
                <tr data-ng-if="View.Sarfasl.AccessFlag==1">
                    <td>

                    </td>
                    <td>
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>
                                    &nbsp;
                                </th>
                                <th>
                                    کاربران
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr data-ng-repeat="user in View.UserList">
                                <td>
                                    <div class="checkbox">
                                        <label class="control-label">
                                            <input type="checkbox" data-ng-model="user.Checked" data-ng-click="Events.userChecking(user)" />
                                        </label>
                                    </div>
                                </td>
                                <td>
                                    {{user.UserID}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td>
                        <!-- Hsb Types -->
                        <div class="checkbox">
                            <label class="control-label">
                                <input type="checkbox" data-ng-model="View.CheckBoxAllowRegisterLiability"
                                       data-ng-click="Events.hsbTypeChecking(View.HsbTypes.AllowRegisterLiability, View.CheckBoxAllowRegisterLiability)" />
                                اجازه ثبت بدهکاری در اسناد داشته باشد
                            </label>
                        </div>
                        <div class="checkbox">
                            <label class="control-label">
                                <input type="checkbox" data-ng-model="View.CheckBoxAllowRegisterCredits"
                                       data-ng-click="Events.hsbTypeChecking(View.HsbTypes.AllowRegisterCredits, View.CheckBoxAllowRegisterCredits)" />
                                اجازه ثبت بستانکاری در اسناد داشته باشد
                            </label>
                        </div>
                        <div class="checkbox">
                            <label class="control-label">
                                <input type="checkbox" data-ng-model="View.CheckBoxReminderShouldOnlyBeDebtor"
                                       data-ng-click="Events.hsbTypeChecking(View.HsbTypes.ReminderShouldOnlyBeDebtor, View.CheckBoxReminderShouldOnlyBeDebtor)" />
                                مانده حساب فقط باید بدهکار باشد
                            </label>
                        </div>
                        <div class="checkbox">
                            <label class="control-label">
                                <input type="checkbox" data-ng-model="View.CheckBoxReminderShouldOnlyBeCreditor"
                                       data-ng-click="Events.hsbTypeChecking(View.HsbTypes.ReminderShouldOnlyBeCreditor, View.CheckBoxReminderShouldOnlyBeCreditor)" />
                                مانده حساب فقط باید بستانکار باشد
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        یادداشت
                    </td>
                    <td>
                        <textarea data-ng-model="View.Sarfasl.YadDasht" cols="200" rows="4" class="form-control input-sm">

                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td>

                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-primary" data-ng-click="Events.saveSarfasl()">
                            ذخیره اطلاعات
                        </button>
                        <a href="/#/Sarfasl" class="btn btn-sm btn-primary">
                            بازگشت
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

---

编辑2：

当我用这个，所有的控制上查看每一个由它自身工作。
但提交后（其中提交按钮是正常的按钮，没有任何影响，但调用我的函数）在我的功能，我看到在整体结果的错误：
$ scope.sarfaslForm。$无效 ==> 真正

推荐答案

好吧，这里是你的code正在假设。当你正在寻找通过检查验证你检查是否值===否则为false将其添加到您的形式，这是不是你所描述你想要的逻辑。

Alright here is the assumption your code is making. When you are looking through to check for validation you are checking to see if value === false otherwise you are adding it to your form, which isn't the logic you are describing you want.

你所指出的是，无论值，如果字段被禁用，并设置为0，我想它从形式删除，那么如果值是假的，我希望它从形式去除其他验证表单。只要有一个逻辑性检查，看是否字段被禁用或不并验证其删除。

What you are stating is that no matter the value if the field is disabled and set to 0 I want it removed from form, then if the value is false I want it removed from form else validate the form. Just have a logic check to see if the field is disabled or not and remove it from validation.

 if (value === 0) {
    form.$removeControl(control);
 } else if (value === false) {
    form.$addControl(control);
    angular.forEach(control.$error, function(validity, validationToken) {
    form.$setValidity(validationToken, !validity, control);
                    });
 } else {
     form.$removeControl(control);
 }

这篇关于禁用不需要验证在AngularJS（条件确认）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！