我采用了棱角分明和我有形式的一些问题的单页应用程序的构建。
形式是使用复选框下拉和两个文本框。
第一个文本框(名称)没有验证。
复选框是使用所谓的“I检查”第三方插件。
下拉是使用一种称为“自举选”插件。
验证是用一种称为“jQuery验证引擎”库。
该plunker是安装在这里
预期的行为是。 简单地说,如果复选框被选中需要的文本框和下降。
1)在页加载因为形式不脏(没有控制被提供的任何值),如果我点击保存按钮应该击中的保存功能,因为有上的控件没有验证,因此不应有验证消息提示上屏幕。
2)如果我点击复选框。 下面的下拉菜单和文本框变为必需的。 这意味着这两个下拉和文本框具有条件验证(jQuery验证引擎的功能),这是已经安装并正常工作。 所以现在如果我点击保存,它不应该打的保存功能,并显示确认提示。
3)它应该保持在限制功能的访问和显示该验证错误提示除非即一些值在下拉列表中选择和盒装文本填充表单控件是有效的。
4)和,如果我取消选中,在点号3中描述的验证消失。
但是,什么情况是:
a)在页面加载如果我点击保存按钮,它没有击中保存功能。
b)若我点击复选框仍然没有击中保存功能和验证错误提示是显示在两个下拉和文本框这是罚款,这就是它的行为方式。
c)如果是填充它使形式NG-有效所需的文本框,它击中了保存功能下降怎么过还处于NG-无效。
d)即使我从下拉验证提示选择一些东西留在下拉,它仍然击中保存功能。
E)(没有那么多担心这个问题),最后要设置在下拉一个自定义的值应为默认值,例如“ - 选择One--”,如果选择了默认应考虑作为没有被选中并应考虑在验证激活为无效。
所有这些代码是dashboard.html和dashboard.js因为我使用的插件,所以我需要的指令与他们正常工作。 对于复选框指令,选择并确认是在控制器代码下dashboard.js。
控制器代码的设置是这样的。
(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;
};
}})();