In my Angular SPA, I have a form that incorporates Jquery validation engine for validation purposes. The form consists of a check box and a text-box. I want the text-box to be required only if the check box is checked, and this functionality is working as intended. However, the issue arises when my ng-submit function is called even in case of a validation error. I am looking to limit this call by using Angular's directive to manage control validations.
<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>
The `vm.getValidation` function returns "validate[required]" or "" based on the value of `vm.SetThreshold`, which is the model of the checkbox above.
The directive is implemented as follows:
.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');
ngModel.$setValidity(element.context.name, valid);
return valid;
});
}
};
}
]);
UPDATE
Upon page load, the form is initially ng-valid due to no validation being present in the text box. When the checkbox is clicked, validation is applied to the text box but the form remains unchanged (still ng-valid). Subsequently, clicking the button triggers the function call despite the presence of validation requirements.
If the validation class is manually added without initiating the function call, the form starts off as invalid on page load and becomes valid once the text box is filled - demonstrating the expected behavior.
This behavior appears to stem from the dynamic injection of validations. It seems that the form's validations need to be reset after such injections take place.
The checkbox utilizes the iCheck Plugin with a directive:
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 prevent an infinite loop during DOM compilation
ele.removeAttr("check-Validation2");
var compile = $compile(ele); //Compile object during prelinking phase
return function(scope, element, attrs, ngModel) {
compile(scope); //Compile DOM during postlinking phase
scope.$watch(attrs.ngModel, function(newValue, oldValue) {
var valid = !element.validationEngine('validate');
ngModel.$setValidity(element.context.name, valid);
return valid;
});
}
}
};
}
]);