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

            }
        };
    }
]);