javascript – 禁用AngularJS中的不需要的验证(条件验证)

前端之家收集整理的这篇文章主要介绍了javascript – 禁用AngularJS中的不需要的验证(条件验证)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个表格需要验证.

该表单包含许多部分,其中一些默认情况下禁用.每个字段中的值是正确的,但是它违反了我的验证指令.例如,当它被禁用时,它应该包含0,但是当它可编辑时,它应该包含其他东西.无论如何,我附加一个禁用指令给他们,并把它们放下.

当我提交我的表单(使用角度范围函数),如果($scope.sarfaslForm.$invalid) – >返回true.它表示当我检查$scope.sarfaslForm.$错误列表时,我有两个无效字段.

跟随这个博客我实现我的验证:
http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/

而在this thread之后,我创建一个指令来忽略我的一些禁用控制:

我对此指令进行了微小的修改

.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:由于我在“文本”类型字段上使用它,我没有最小/最大值,只有最小/最大长度.我确定这不是问题,但我正在包括这个代码来确保.

.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.$invalid ==>真正

解决方法

这里是你的代码所做的假设.当您正在查看以检查验证时,您将检查值=== false,否则您将其添加到表单中,这不是您要描述的逻辑.

你所说的是,无论值如果该字段被禁用并设置为0,我希望它从表单中删除,那么如果值为false,我希望它从形式除去,否则验证该表单.只需进行逻辑检查即可查看该字段是否已禁用,并将其从验证中删除.

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

猜你在找的JavaScript相关文章