我正在使用指令来设置几个输入元素的setValidity。问题是有些是显示的,而有些则没有。有没有办法在隐藏输入元素时禁用验证?也许检查ng-show属性的指令?在下面的示例中,当formData.extra = false时,不应验证输入
<input ng-show="formData.extra" type="text" name="frequencyAllocationOptimizedBitrate" class="form-control" id="bookingFrequencyAllocation-bitrate" ng-model="formData.frequencyAllocations.optimized.bitrate" ng-required="true">
<p ng-show="scpc.frequencyAllocationOptimizedBitrate.$error.required && scpc.frequencyAllocationOptimizedBitrate.$dirty" class="has-error">
A value is required.
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</p>
答案 0 :(得分:1)
使用条件ng-required(ng-required =“formData.extra”):
<input ng-show="formData.extra" type="text" name="frequencyAllocationOptimizedBitrate" class="form-control" id="bookingFrequencyAllocation-bitrate" ng-model="formData.frequencyAllocations.optimized.bitrate" ng-required="formData.extra">
<p ng-show="scpc.frequencyAllocationOptimizedBitrate.$error.required && scpc.frequencyAllocationOptimizedBitrate.$dirty" class="has-error">
A value is required.
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</p>
答案 1 :(得分:0)
我通过在隐藏元素时不在指令中验证来解决它,并且对于所需的属性我使用了MajoB解决方案。
"use strict";
angular.module("kap.directive")
.directive('kapValidationDuration', ['$timeout', '$log', function ($timeout, $log) {
return {
restrict: 'A',
require: 'ngModel',
scope: { minReservationDurationMinutes: '=minReservationDurationMinutes' },
link: function (scope, element, attrs, ctrl) {
if (attrs.type === 'radio' || attrs.type === 'checkbox') {
return;
}
ctrl.$parsers.push(function (value) {
if(value && **!element[0].hidden**) {
var lTimeValues = value.split(":"),
lHoursToMinutes = parseInt(lTimeValues[0], 10) * 60,
lMinutes = parseInt(lTimeValues[1], 10),
lMinReservationDurationMinutes = parseInt(attrs.minreservationdurationminutes, 10) || 10,
lValidity = true;
if ((lHoursToMinutes + lMinutes) < lMinReservationDurationMinutes) {
lValidity = false;
}
ctrl.$setValidity('kapValidationDuration', lValidity);
}
return value;
});
}
};
}]);