Javascript 禁用AngularJS中不需要的验证（条件验证）
我有一张表格需要验证 表单包含许多部分，其中一些部分在默认情况下处于禁用状态。每个字段中的值都是正确的，但它违反了我的验证指令。例如，当它处于禁用状态时，它应该包含0，但当它处于可编辑状态时，它应该包含其他内容。不管怎样，我给它们附加了一个禁用指令，并将它们放下 当我提交表单时（使用角度范围函数），Javascript 禁用AngularJS中不需要的验证（条件验证）,javascript,angularjs,validation,angularjs-directive,Javascript,Angularjs,Validation,Angularjs Directive,我有一张表格需要验证 表单包含许多部分，其中一些部分在默认情况下处于禁用状态。每个字段中的值都是正确的，但它违反了我的验证指令。例如，当它处于禁用状态时，它应该包含0，但当它处于可编辑状态时，它应该包含其他内容。不管怎样，我给它们附加了一个禁用指令，并将它们放下 当我提交表单时（使用角度范围函数），if（$scope.sarfaslForm.$invalid）-->返回true。当我检查$scope.sarfaslForm.$error列表时，它说我有两个无效字段 在本博客之后，我实施了我的验证
if（$scope.sarfaslForm.$invalid）$scope.sarfaslForm.$error.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
}
});
}
}
})
.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;
});
}
}
});
编辑：应詹姆斯的请求，我将HTML 并在此处查看我的页面。
کد سرفصل
کل
معین
تفضیل یک
تفضیل دو
جزء
کد کل الظامی می باشد
کد کل نمی تواند صفر باشد
کد معین الظامی می باشد
کد معین نمی تواند صفر باشد
کد تفظیل یک الظامی می باشد
کد تفظیل یک نمی تواند صفر باشد
کد تفظیل دو الظامی می باشد
کد تفظیل دو نمی تواند صفر باشد
کد جزء الظامی می باشد
کد جزء نمی تواند صفر باشد
عنوان سرفصل
saveSarfasl: function () {
$scope.$broadcast('show-errors-check-validity');
if ($scope.sarfaslForm.$invalid) { --> True :|
return;
}
//Stuffs
}
<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>
</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>
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);
}