Question

我正在写一个动态隐藏输入字段的指令。规则来自数据库。如果div中的所有div都被隐藏，那么paren div的可见性也设置为none。问题是隐藏元素没有通过验证。这是我的代码

 return {
    restrict: 'A',
    priority: 0,
    terminal: false,
    link: function (scope, element, attrs) {
        var unwatch = scope.$watchCollection('fieldRules', function (newVal, oldVal) {
            if (scope.fieldRules != undefined && scope.fieldRules.length > 0) {
                var elem = $(element);
                var rule = $filter('filter')(scope.fieldRules, { FieldKey: attrs.key })[0];
                if (element.is('div')) {
                    if (!rule.IsVisible) {
                        attrs.$set('ngHide', true);
                        //attrs.$set('ngIf', false);
                        var lastDiv = elem.siblings('div').last();
                        lastDiv.addClass('field-alignment');
                    }
                    else {
                        attrs.$set('ngShow', true);
                        //attrs.$set('ngIf', true);
                    }
                    var parentDiv = elem.closest('div.form-group')
                    if (parentDiv.find('div.input-group[ng-hide!=true]').length === 0){
                        parentDiv.hide();
                    }
                }

                attrs.$set('fieldRule', null);
                $compile(element)(scope);

            }
        })
    }    

 }

stackoverflow上的一个解决方案建议使用ng-if但它也不起作用。

修改我希望angular绕过隐藏div中输入字段的验证（这些输入字段是必需的，意味着它们包含属性ng-required = true）。我也删除了不必要的代码。

这是我的HTML

<div field-rule data-key="minhourlyrate" class="input-group erorinner" style="width: 48%;float: left;" ng-class="{invalidField:checkFieldValidity(signupForm.minhourlyrate)}">
                                <span class="input-group-addon"><i class="fa fa-usd"></i></span>
<input id="txtMinHourlyRate" min="0" max="100" type="number"   name="minhourlyrate" ng-model="user.MinHourlyRate" class="form-control" placeholder="Min" autofocus="" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" ng-required="true">

我所要做的就是通过指令隐藏输入字段以及包含它的div。也非常欢迎编写新指令来解决问题。

Angularjs阻止验证动态隐藏div

0 个答案: