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

【问题标题】：exclude hidden form elements from validation从验证中排除隐藏的表单元素
【发布时间】：2014-02-05 09:45:52
【问题描述】：

我正在使用指令来设置几个输入元素的有效性。问题是一些显示，而另一些则没有。当输入元素被隐藏时，有没有办法禁用验证？也许检查 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>

【问题讨论】：

我有这个问题的解决方案，但是当我在做一个演示时，我遇到了一个问题，并在这里发布了另一个问题：stackoverflow.com/questions/21575051/…。你可以看看。

标签： html angularjs

【解决方案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>

【讨论】：

【解决方案2】：

我已经通过在隐藏元素时不在指令中进行验证来解决它，并且对于所需的属性，我使用了 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;
                    });
                }
            };
        }]);

【讨论】：