[英]AngularJS directive for validation
I am trying create a custom directive to validate an input field's text against a list. 我正在尝试创建一个自定义指令,以针对列表验证输入字段的文本。
For example I have a list defined in my controller: 例如,我在控制器中定义了一个列表:
$scope.examples = [
{"name":"Jeff"},
{"name":"John"},
{"name":"Sarah"},
{"name":"Julie"}
];
and my directive looks something like this: 我的指令看起来像这样:
.directive('customValidation', function () {
return {
restrict:'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(function(input){
if(input === scope[attrs.customValidation]) {
ctrl.$setValidity('customValidation', true);
return input;
}
else {
ctrl.$setValidity('customValidation', false);
return undefined;
}
});
}
};
});
So I can compare a list in my view like so: 因此,我可以像这样比较视图中的列表:
<form name = "form">
<ul>
<li ng-repeat="item in examples" name='list' ng-model="item.name">
{{item.name}}</li>
</ul>
<input type='text' id='input' required name='input'
custom-validation='item.name' ng-model='input2'>
<p ng-show='form.input2.$valid'>Already a name</p>
<button ng-disabled="form.$valid">Add user</button>
But I am a little stuck and I think my directive needs some tweaking but I am not sure. 但是我有点困惑,我认为我的指令需要一些调整,但是我不确定。 Thanks in advance for your help! 在此先感谢您的帮助!
I have added several modifications to your original code it has so many typos and misleadings. 我已经对您的原始代码进行了一些修改,它有很多错别字和误导性。 And I adapt it to be up-to-date with the last release of AngularJS (1.3.x) api. 我将其调整为最新版本的AngularJS(1.3.x)API。
myApp.directive('customValidation', function() {
return {
restrict: 'AE',
require: 'ngModel',
scope: {
collection: '=',
property: '@'
},
link: function(scope, element, attrs, ctrl) {
ctrl.$validators.customValidation = function(model, viewValue) {
// Check if viewValue is not empty (:
if (!ctrl.$isEmpty(viewValue)) {
// Search in the collection if the username already exist.
var tot = scope.collection.filter(function(x) {
return x[scope.property].toUpperCase() === viewValue.toUpperCase()
});
// Other user(s) with the same name has been founded.
if (tot.length > 0)
return true;
}
// Valid state.
return false;
}
}
}
});
<form name="form">
<ul>
<li ng-repeat="item in examples" name='list' ng-model="item.name">
{{item.name}}</li>
</ul>
<input type='text' id='input' required name='input' custom-validation collection="examples" property='name' ng-model='input2' />
<p ng-show='!form.input.$error.customValidation'>Already a name</p>
<button ng-disabled="form.$valid">Add user</button>
</form>
I hope this is what you was looking for, 我希望这就是你想要的,
Cheers. 干杯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.