jquery 验证引擎的条件验证

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;
                    });
                }

            }
        };
    }
]);