I have an Single Page Application build using Angular and i am having some issues with the form.
Form is using a check box a drop down and two text boxes.
first text box (Name) has no validation.
check-Box is using a third party plugin called "iCheck".
Drop down is using a plugin called "bootstrap-select".
Validation is using a library called "Jquery Validation Engine".
The expected behavior is. In simple words the text box and drop are required if check-box is checked.
1) On Page load because form is not dirty (none of the controls were supplied any value) if i click the save button it should hit the save function because there were no validation on the controls, hence there should be no validation message prompt on the screen.
2) If i click the check box. the drop down and the text box below becomes required. it means that both drop down and text box has conditional validation (feature of Jquery Validation Engine) which is already setup and working . so now if i click Save, it should not hit the save function and display the validation prompt.
3) it should keep on restricting the function access and display the validation error prompt unless form controls are valid i.e. some value is selected in drop-down and text boxed is filled.
4) and if i un-check, validation described in point number 3 goes away.
But whats happening is:
a) On page load if i click the save button it does not hit the save function.
b) If i click the check box it still does not hit the save function and validation error prompts are display on both drop down and text-box which is fine thats how it should behave.
c) When is fill the required text box it makes the form ng-valid and it hit the save function how ever the drop is still in ng-invalid.
d) Even if i select some thing from the drop down the validation prompt remains on the drop down and it still hits the save functions.
e) (Not that much worried about this issue) lastly want to setup a custom value in the drop down that should act as default e.g. "--Select One--" and if the default is selected it should be considered as nothing is selected and it should be considered as invalid when validation is active.
all of this code is in dashboard.html and dashboard.js since i am using plugins so i needed directives to work with them properly. Directives for check-box, Select and Validation are in dashboard.js under the controller code.
Controller code is setup like this.
(function () {
'use strict';
var controllerId = 'dashboard';
angular.module('app').controller(controllerId, ['$scope', dashboard]);
function dashboard($scope) {
var vm = this;
vm.title = 'Dashboard2';
vm.CurrCustomer = {};
vm.CurrCustomer.Name = ""; //first text box
vm.CurrCustomer.Logic = false;
vm.CurrCustomer.SetThreshold = false;
vm.CurrCustomer.Threshold;
vm.saveChanges = function () {
alert('function called');
var NewCustomer = vm.CurrCustomer;
// submit NewCustomer to DB.
};
$scope.toggleSelection = function () {
vm.CurrCustomer.SetThreshold = !vm.CurrCustomer.SetThreshold;
};
}})();