Question

我有一个表单，它使用Jquery验证引擎作为内部验证库和Angular的SPA。表单有一个复选框和一个文本框。我希望只有选中复选框才需要该文本框。这个功能似乎有效。但问题是，即使存在验证错误，我的ng-submit函数也会被调用。我想限制此调用。我正在使用Angular的指令来验证和使控件无效。

            <form role="form" name="frmVariableConfig1" class="formValidVariableConfig1 form-inline" novalidate ng-submit="frmVariableConfig1.$valid && vm.saveChanges()">


                        <span class="checkableBox"><input type="checkbox" item="variable" toggle-selection="toggleSelection('1')" bootstrap-check ng-model="vm.SetThreshold"></span>


            <input type="text" ng-model="vm.Threshold" name="cntrlThresh" class="form-control input-sm {{ vm.getValidation(vm.SetThreshold) }}" placeholder="Threshold" check-validation2>

                  <button type="submit" class="btn btn-sm">Save</button>
        </form>

vm.getValidation函数根据vm.SetThreshold的值返回“validate [required]”或“”，这是上面复选框的模型。

指令设置如下

    .module('app').directive('checkValidation2', [
    function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModel) {
                element.closest('form').validationEngine();

                scope.$watch(attrs.ngModel, function (newValue, oldValue) {
                    var valid = !element.validationEngine('validate');//check if the control is valid
                    ngModel.$setValidity(element.context.name, valid); //set validity accordingly. 
                    return valid;
                });
            }
        };
    }
]);

更新

这可能会有所帮助。在页面加载时，表单是ng-valid。很好，因为没有在文本框中注入验证..现在我单击它在文本框中注入验证类的复选框，但表单保持不变。即它仍然是有效的。所以现在如果我点击按钮原因表单有效，则调用该函数。

如果我只是在没有函数调用的情况下添加验证类，则表单在页面加载时无效，并且如果文本框已填满则变为有效。这是预期的行为。

看起来所有事情都在发生，因为我正在动态注入验证。一些注入后需要重新启动表单验证的方法。

checkBox正在使用带有指令的iCheck插件

angular.module('app').directive('checkValidation2', ['$compile',
function($compile) {
    return {
        restrict: 'A',
        require: '?ngModel',
        compile: function(ele, attr, ngModel) {
            ele.closest('form').validationEngine();
            //removing directive attribute to stop to go it to infinite loop
            //as we are compiling DOM again

            ele.removeAttr("check-Validation2");
            var compile = $compile(ele); //compiling object on prelink state
            return function(scope, element, attrs, ngModel) {
                compile(scope); //compiling dom in postlink phase
                scope.$watch(attrs.ngModel, function(newValue, oldValue) {
                    var valid = !element.validationEngine('validate'); //check if the control is valid
                    ngModel.$setValidity(element.context.name, valid); //set validity accordingly. 
                    return valid;
                });
            }

        }
    };
}

]）;

Answer 1

当您使用controllerAs语法时，您的值不在范围内，您需要在范围内绑定该值

$scope.$watch(angular.bind(this, function () {
    return this[attrs.ngModel]; // this will evaluate ng-model value from `this`
}), function (newVal, oldVal) {
     var valid = !element.validationEngine('validate');//check if the control is valid
     ngModel.$setValidity(element.context.name, valid); //set validity accordingly. 
     return valid;
});

<强>更新

您应该尝试在指令的编译阶段注入表单validationEngine，以便在DOM中准确地进行更改，

<强>指令

.module('app').directive('checkValidation2', [
    function() {
        return {
            restrict: 'A',
            require: '?ngModel',
            compile: function(ele, attr, ngModel) {
                ele.closest('form').validationEngine();
                //removing directive attribute to stop to go it to infinite loop
                //as we are compiling DOM again
                ele.removeAttr('checkValidation2');
                var compile = $compile(ele); //compiling object on prelink state
                return function(scope, element, attrs, ngModel) {
                    compile(scope); //compiling dom in postlink phase
                    scope.$watch(attrs.ngModel, function(newValue, oldValue) {
                        var valid = !element.validationEngine('validate'); //check if the control is valid
                        ngModel.$setValidity(element.context.name, valid); //set validity accordingly. 
                        return valid;
                    });
                }

            }
        };
    }
]);

jquery验证引擎的条件验证

1 个答案: