从验证中排除隐藏的表单元素

时间:2014-02-05 09:45:53

标签: html angularjs

我正在使用指令来设置几个输入元素的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>

2 个答案:

答案 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;
                    });
                }
            };
        }]);