我必须使用指令验证表单,因为AngularJS可以启用或禁用提交表单按钮。
我在jQuery中有一个函数,但我需要AngularJS监视这种行为。
此功能可比较输入以防止每个输入中出现重复信息。
<form id="myform">
<table>
<tr>
<td><input name="currency1" class="required" unique="currency"/></td>
</tr>
<tr>
<td><input name="currency2" class="required" unique="currency"/></td>
</tr>
<tr>
<td><input name="currency3" class="required" unique="currency"/></td>
</tr>
<tr>
<td><input name="currency4" class="required" unique="currency"/></td>
</tr>
</table>
这是功能
jQuery.validator.addMethod("unique", function(value, element, params) {
var prefix = params;
var selector = jQuery.validator.format("[name!='{0}'][name^='{1}'][unique='{1}']", element.name, prefix);
var matches = new Array();
$(selector).each(function(index, item) {
if (value == $(item).val()) {
matches.push(item);
}
});
return matches.length == 0;
},
"Valor Repetido"
);
jQuery.validator.classRuleSettings.unique = {
unique: true
};
$("#myform").validate();
$("#validate").onBlur(function() {
$("#myform").valid();
});
和CSS
label.error { color: red }
任何人都可以帮助我吗?
答案 0 :(得分:1)
您可以拥有一个对象数组来保存所有值,并深入观察。
在控制器中:
$scope.currencies =
[{'value':'val1'},{'value':'val2'},{'value':'val1'} ];
$scope.$watch('currencies', function(){
$scope.duplicates = false;
var found = [];
$scope.currencies.forEach(function(currency){
if(!(found.indexOf(currency.value)+1))
found.push(currency.value);
else $scope.duplicates = true;
});
},true); //The 'true' last parameter is the signal to deep watch.
表格中的每个输入都与ng-model
绑定到$scope.currencies
中的对象,以便深度监视会立即看到任何更改。您可以使用ng-repeat
指令生成输入列表:
<tr ng-repeat="currency in currencies">
<td><input type="text" ng-model="currency.value"></input></td>
</tr>
然后,对于提交按钮,请<input type="submit" ng-disabled="duplicates"></input>
如果您愿意,可以添加按钮来添加或删除$scope.currencies
中的元素,它会立即反映在视图中。