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

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

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

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

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

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

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

  1. .directive('hsDisableValidation',function() {
  2.     return {
  3.         require: '^form',restrict: 'A',link: function(scope,element,attrs,form) {
  4.             var control;
  5.  
  6.             scope.$watch(function() {
  7.                 return scope.$eval(attrs.hsDisableValidation);
  8.             },function(value) {
  9.                 if (!control) {
  10.                     control = form[element[0].name];
  11.                     //form[element.find("input").attr("name")];
  12.                 }
  13.                 if (value === false) {
  14.                     form.$addControl(control);
  15.                     angular.forEach(control.$error,function(validity,validationToken) {
  16.                         form.$setValidity(validationToken,!validity,control);
  17.                     });
  18.                 } else {
  19.                     form.$removeControl(control);
  20.                     //In Here: I tried to $setValidity of controls to true,Remove Error List,and Remove Validator Function,but these things didn't worked out
  21.                 }
  22.             });
  23.         }
  24.     }
  25. })

这里验证对我来说总是失败：
PS：由于我在“文本”类型字段上使用它,我没有最小/最大值,只有最小/最大长度.我确定这不是问题,但我正在包括这个代码来确保.

  1. .directive('hsMinValue',function() {
  2.         return {
  3.             require: 'ngModel',link: function (scope,elem,attr,ngModel) {
  4.  
  5.                 function isLesser(value) {
  6.                     var minVal = parseInt(attr.hsMinValue);
  7.                     return parseInt(value) < minVal;
  8.                 }
  9.  
  10.                 function validate(value) {
  11.                     var valid = !isLesser(value);
  12.                     ngModel.$setValidity('minValue',valid);
  13.                     return valid ? value : undefined;
  14.                 }
  15.  
  16.                 ngModel.$parsers.unshift(function (value) {
  17.                     ngModel.$setValidity('minValue',!isLesser(value));
  18.                     return value;
  19.                 });
  20.  
  21.                 ngModel.$formatters.unshift(function (value) {
  22.                     ngModel.$setValidity('minValue',!isLesser(value));
  23.                     return value;
  24.                 });
  25.             }
  26.         }
  27.     });

然后我保存：

  1. saveSarfasl: function () {
  2.                 $scope.$broadcast('show-errors-check-validity');
  3.                 if ($scope.sarfaslForm.$invalid) { --> True :|
  4.                     return;
  5.                 }
  6.                 //Stuffs
  7. }

编辑：请求詹姆斯,我把HTML
和我的页面的视图在这里.

  1. <div class="clearfix">
  2.     <form name="sarfaslForm" novalidate>
  3.         <table class="table-condensed">
  4.             <tbody>
  5.                 <tr>
  6.                     <td>
  7.                         کد سرفصل
  8.                     </td>
  9.                     <td>
  10.                         <table class="table-condensed">
  11.                             <tbody>
  12.                                 <tr>
  13.                                     <td data-ng-if="View.FinYear.LenK != 0">
  14.                                         کل
  15.                                     </td>
  16.                                     <td data-ng-if="View.FinYear.LenM != 0">
  17.                                         معین
  18.                                     </td>
  19.                                     <td data-ng-if="View.FinYear.LenT1 != 0">
  20.                                         تفضیل یک
  21.                                     </td>
  22.                                     <td data-ng-if="View.FinYear.LenT2 != 0">
  23.                                         تفضیل دو
  24.                                     </td>
  25.                                     <td data-ng-if="View.FinYear.LenJ != 0">
  26.                                         جزء
  27.                                     </td>
  28.                                 </tr>
  29.                                 <tr>
  30.                                     <td data-ng-if="View.FinYear.LenK != 0">
  31.                                         <div class="form-group" hs-show-errors hs-show-success>
  32.                                             <input name="CodKol" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenK}}"
  33.                                                    class="form-control input-sm"
  34.                                                    data-ng-model="View.Kol" data-ng-disabled="View.Level!==1"
  35.                                                    data-ng-blur="Events.codeChanged('k')"
  36.                                                    data-ng-change="Events.setSarfaslCod()"
  37.                                                    hs-disable-validation="View.Level!==1"
  38.                                                    data-ng-required="true"
  39.                                                    hs-min-value="1" />
  40.                                             <p class="help-block" ng-if="sarfaslForm.CodKol.$error.required">
  41.                                                 کد کل الظامی می باشد
  42.                                             </p>
  43.                                             <p class="help-block" ng-if="sarfaslForm.CodKol.$error.minValue">
  44.                                                 کد کل نمی تواند صفر باشد
  45.                                             </p>
  46.                                         </div>
  47.                                     </td>
  48.                                     <td data-ng-if="View.FinYear.LenM != 0">
  49.                                         <div class="form-group" hs-show-errors hs-show-success>
  50.                                             <input name="CodMoin" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenM}}"
  51.                                                    class="form-control input-sm"
  52.                                                    data-ng-model="View.Moin" data-ng-disabled="View.Level!==2"
  53.                                                    data-ng-blur="Events.codeChanged('m')"
  54.                                                    data-ng-change="Events.setSarfaslCod()"
  55.                                                    hs-disable-validation="View.Level!==2"
  56.                                                    data-ng-required
  57.                                                    hs-min-value="1" />
  58.                                             <p class="help-block" ng-if="sarfaslForm.CodMoin.$error.required">
  59.                                                 کد معین الظامی می باشد
  60.                                             </p>
  61.                                             <p class="help-block" ng-if="sarfaslForm.CodMoin.$error.minValue">
  62.                                                 کد معین نمی تواند صفر باشد
  63.                                             </p>
  64.                                         </div>
  65.                                     </td>
  66.                                     <td data-ng-if="View.FinYear.LenT1 != 0">
  67.                                         <div class="form-group" hs-show-errors hs-show-success>
  68.                                             <input name="CodTafzil1" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenT1}}"
  69.                                                    class="form-control input-sm"
  70.                                                    data-ng-model="View.Tafzil1" data-ng-disabled="View.Level!==3"
  71.                                                    data-ng-blur="Events.codeChanged('t1')"
  72.                                                    data-ng-change="Events.setSarfaslCod()"
  73.                                                    hs-disable-validation="View.Level!==3"
  74.                                                    data-ng-required
  75.                                                    hs-min-value="1" />
  76.                                             <p class="help-block" ng-if="sarfaslForm.CodTafzil1.$error.required">
  77.                                                 کد تفظیل یک الظامی می باشد
  78.                                             </p>
  79.                                             <p class="help-block" ng-if="sarfaslForm.CodTafzil1.$error.minValue">
  80.                                                 کد تفظیل یک نمی تواند صفر باشد
  81.                                             </p>
  82.                                         </div>
  83.                                     </td>
  84.                                     <td data-ng-if="View.FinYear.LenT2 != 0">
  85.                                         <div class="form-group" hs-show-errors hs-show-success>
  86.                                             <input name="CodTafzil2" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenT2}}"
  87.                                                    class="form-control input-sm"
  88.                                                    data-ng-model="View.Tafzil2" data-ng-disabled="View.Level!==4"
  89.                                                    data-ng-blur="Events.codeChanged('t2')"
  90.                                                    data-ng-change="Events.setSarfaslCod()"
  91.                                                    hs-disable-validation="View.Level!==4"
  92.                                                    data-ng-required
  93.                                                    hs-min-value="1" />
  94.                                             <p class="help-block" ng-if="sarfaslForm.CodTafzil2.$error.required">
  95.                                                 کد تفظیل دو الظامی می باشد
  96.                                             </p>
  97.                                             <p class="help-block" ng-if="sarfaslForm.CodTafzil2.$error.minValue">
  98.                                                 کد تفظیل دو نمی تواند صفر باشد
  99.                                             </p>
  100.                                         </div>
  101.                                     </td>
  102.                                     <td data-ng-if="View.FinYear.LenJ != 0">
  103.                                         <div class="form-group" hs-show-errors hs-show-success>
  104.                                             <input name="CodJoz" type="text" hs-restrict-pattern="[^\d]*" maxlength="{{View.FinYear.LenJ}}"
  105.                                                    class="form-control input-sm"
  106.                                                    data-ng-model="View.Joz" data-ng-disabled="View.Level!==5"
  107.                                                    data-ng-blur="Events.codeChanged('j')"
  108.                                                    data-ng-change="Events.setSarfaslCod()"
  109.                                                    hs-disable-validation="View.Level!==5"
  110.                                                    data-ng-required
  111.                                                    hs-min-value="1" />
  112.                                             <p class="help-block" ng-if="sarfaslForm.CodJoz.$error.required">
  113.                                                 کد جزء الظامی می باشد
  114.                                             </p>
  115.                                             <p class="help-block" ng-if="sarfaslForm.CodJoz.$error.minValue">
  116.                                                 کد جزء نمی تواند صفر باشد
  117.                                             </p>
  118.                                         </div>
  119.                                     </td>
  120.                                 </tr>
  121.                             </tbody>
  122.                         </table>
  123.                     </td>
  124.                 </tr>
  125.                 <tr>
  126.                     <td>
  127.                         عنوان سرفصل
  128.                     </td>
  129.                     <td ng-class="{'has-error':sarfaslForm.HsbNam.$invalid && sarfaslForm.HsbNam.$dirty}">
  130.                         <div class="form-group" hs-show-errors hs-show-success>
  131.                             <input name="HsbNam" type="text" data-ng-model="View.Sarfasl.HsbNam"
  132.                                    class="form-control input-sm"
  133.                                    data-ng-required="true" />
  134.                             <p class="help-block" ng-if="sarfaslForm.HsbNam.$error.required">
  135.                                 نام سرفصل الظامی می باشد
  136.                             </p>
  137.                         </div>
  138.                     </td>
  139.                 </tr>
  140.                 <tr>
  141.                     <td>
  142.  
  143.                     </td>
  144.                     <td>
  145.                         <div class="radio" hs-show-errors>
  146.                             <label class="control-label">
  147.                                 <input type="radio" data-ng-model="View.Sarfasl.HsbKind" name="HsbKind" data-ng-value="'00'"
  148.                                         data-ng-required="true" />
  149.                                 زیر سطح دارد
  150.                             </label>
  151.                         </div>
  152.                         <div class="radio" hs-show-errors>
  153.                             <label class="control-label">
  154.                                 <input type="radio" data-ng-model="View.Sarfasl.HsbKind" name="HsbKind" data-ng-value="'11'"
  155.                                        data-ng-required="true" />
  156.                                 سطح آخر است
  157.                             </label>
  158.                             <p class="help-block" ng-if="sarfaslForm.HsbKind.$error.required">
  159.                                 انتخاب یکی از حالات الظامی می باشد
  160.                             </p>
  161.                         </div>
  162.                     </td>
  163.                 </tr>
  164.                 <tr>
  165.                     <td>
  166.  
  167.                     </td>
  168.                     <td>
  169.                         <div class="radio" hs-show-errors>
  170.                             <label class="control-label">
  171.                                 <input type="radio" data-ng-model="View.Sarfasl.Permanent" name="Permanent" data-ng-value="'1'"
  172.                                        data-ng-required="true" />
  173.                                 حساب دائم
  174.                             </label>
  175.                         </div>
  176.                         <div class="radio" hs-show-errors>
  177.                             <label class="control-label">
  178.                                 <input type="radio" data-ng-model="View.Sarfasl.Permanent" name="Permanent" data-ng-value="'0'"
  179.                                        data-ng-required="true" />
  180.                                 حساب موقت
  181.                             </label>
  182.                             <p class="help-block" ng-if="sarfaslForm.Permanent.$error.required">
  183.                                 انتخاب یکی از حالات الظامی می باشد
  184.                             </p>
  185.                         </div>
  186.                     </td>
  187.                 </tr>
  188.                 <tr>
  189.                     <td>
  190.  
  191.                     </td>
  192.                     <td>
  193.                         <div class="radio" hs-show-errors>
  194.                             <label class="control-label">
  195.                                 <input type="radio" data-ng-model="View.Sarfasl.AccessFlag" name="AccessFlag" data-ng-value="0"
  196.                                        data-ng-required="true" />
  197.                                 حساب برای همه در دسترس باشد
  198.                             </label>
  199.                         </div>
  200.                         <div class="radio" hs-show-errors>
  201.                             <label class="control-label">
  202.                                 <input type="radio" data-ng-model="View.Sarfasl.AccessFlag" name="AccessFlag" data-ng-value="1"
  203.                                        data-ng-required="true" />
  204.                                 حساب فقط برای کاربران زیر در دسترس باید
  205.                             </label>
  206.                             <p class="help-block" ng-if="sarfaslForm.AccessFlag.$error.required">
  207.                                 انتخاب یکی از حالات الظامی می باشد
  208.                             </p>
  209.                         </div>
  210.                     </td>
  211.                 </tr>
  212.                 <tr data-ng-if="View.Sarfasl.AccessFlag==1">
  213.                     <td>
  214.  
  215.                     </td>
  216.                     <td>
  217.                         <table class="table table-bordered table-hover">
  218.                             <thead>
  219.                             <tr>
  220.                                 <th>
  221.                                     &nbsp;
  222.                                 </th>
  223.                                 <th>
  224.                                     کاربران
  225.                                 </th>
  226.                             </tr>
  227.                             </thead>
  228.                             <tbody>
  229.                             <tr data-ng-repeat="user in View.UserList">
  230.                                 <td>
  231.                                     <div class="checkBox">
  232.                                         <label class="control-label">
  233.                                             <input type="checkBox" data-ng-model="user.Checked" data-ng-click="Events.userChecking(user)" />
  234.                                         </label>
  235.                                     </div>
  236.                                 </td>
  237.                                 <td>
  238.                                     {{user.UserID}}
  239.                                 </td>
  240.                             </tr>
  241.                             </tbody>
  242.                         </table>
  243.                     </td>
  244.                 </tr>
  245.                 <tr>
  246.                     <td>
  247.  
  248.                     </td>
  249.                     <td>
  250.                         <!-- Hsb Types -->
  251.                         <div class="checkBox">
  252.                             <label class="control-label">
  253.                                 <input type="checkBox" data-ng-model="View.CheckBoxAllowRegisterLiability"
  254.                                        data-ng-click="Events.hsbTypeChecking(View.HsbTypes.AllowRegisterLiability,View.CheckBoxAllowRegisterLiability)" />
  255.                                 اجازه ثبت بدهکاری در اسناد داشته باشد
  256.                             </label>
  257.                         </div>
  258.                         <div class="checkBox">
  259.                             <label class="control-label">
  260.                                 <input type="checkBox" data-ng-model="View.CheckBoxAllowRegisterCredits"
  261.                                        data-ng-click="Events.hsbTypeChecking(View.HsbTypes.AllowRegisterCredits,View.CheckBoxAllowRegisterCredits)" />
  262.                                 اجازه ثبت بستانکاری در اسناد داشته باشد
  263.                             </label>
  264.                         </div>
  265.                         <div class="checkBox">
  266.                             <label class="control-label">
  267.                                 <input type="checkBox" data-ng-model="View.CheckBoxReminderShouldOnlyBeDebtor"
  268.                                        data-ng-click="Events.hsbTypeChecking(View.HsbTypes.ReminderShouldOnlyBeDebtor,View.CheckBoxReminderShouldOnlyBeDebtor)" />
  269.                                 مانده حساب فقط باید بدهکار باشد
  270.                             </label>
  271.                         </div>
  272.                         <div class="checkBox">
  273.                             <label class="control-label">
  274.                                 <input type="checkBox" data-ng-model="View.CheckBoxReminderShouldOnlyBeCreditor"
  275.                                        data-ng-click="Events.hsbTypeChecking(View.HsbTypes.ReminderShouldOnlyBeCreditor,View.CheckBoxReminderShouldOnlyBeCreditor)" />
  276.                                 مانده حساب فقط باید بستانکار باشد
  277.                             </label>
  278.                         </div>
  279.                     </td>
  280.                 </tr>
  281.                 <tr>
  282.                     <td>
  283.                         یادداشت
  284.                     </td>
  285.                     <td>
  286.                         <textarea data-ng-model="View.Sarfasl.YadDasht" cols="200" rows="4" class="form-control input-sm">
  287.  
  288.                         </textarea>
  289.                     </td>
  290.                 </tr>
  291.                 <tr>
  292.                     <td>
  293.  
  294.                     </td>
  295.                     <td>
  296.                         <button type="button" class="btn btn-sm btn-primary" data-ng-click="Events.saveSarfasl()">
  297.                             ذخیره اطلاعات
  298.                         </button>
  299.                         <a href="/#/Sarfasl" class="btn btn-sm btn-primary">
  300.                             بازگشت
  301.                         </a>
  302.                     </td>
  303.                 </tr>
  304.             </tbody>
  305.         </table>
  306.     </form>
  307. </div>

编辑2：

当我使用这个,所有的控件都可以很好的查看每一个它自己.
但是在提交之后(提交按钮是正常按钮,没有任何效果,但是调用我的函数)在我的函数中,我看到整体结果的错误：
$scope.sarfaslForm.$invalid ==>真正

解决方法

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

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

  1. if (value === 0) {
  2.     form.$removeControl(control);
  3.  } else if (value === false) {
  4.     form.$addControl(control);
  5.     angular.forEach(control.$error,validationToken) {
  6.     form.$setValidity(validationToken,control);
  7.                     });
  8.  } else {
  9.      form.$removeControl(control);
  10.  }

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作