[英]Creating a custom form validator on an element directive in Angular?
我有一個tags
Angular元素指令,其操作與Stack Overflow自己的“標記”輸入字段非常相似,以解決此處的問題。
我想驗證tag
元素上的ng-model
屬性是至少一個標簽且少於十個標簽的數組。 但是,我不想創建單獨的指令來對此進行驗證,因為我不再需要再次驗證數組的長度。 我希望邏輯可以自我包含在element指令內。
到目前為止,這是我得到的:
angular.module("directives.tags", []).directive("tags", ["Tag", "$timeout", function(Tag, $timeout) {
return {
require: 'ngModel',
restrict: 'E',
scope: {
availableTags: '=',
selectedTags: '=ngModel',
placeholder: '@'
},
link: function($scope, element, attributes, ctrl) {
// Snip
ctrl.$validators.taglength = function(mv, vv) {
return (mv.length > 0);
}
}
}
我的指令是這樣使用的:
<tags available-tags="data.tags" name="tags" ng-model="text.tags"></tags>
<span ng-show="writeForm.tags.$error.taglength">Invalid!</span>
但是,我的taglength
驗證器無法正常工作,否則我無法正確綁定它。 有任何想法嗎?
在模板中,您需要引用元素name
,而不是在控制器scope
引用變量。 並且,在指令的隔離范圍內,可以使用純ngModel
。
例如:
<body ng-controller="Ctrl">
Tags: {{ usedTags | json }}
<ng-form name="writeForm">
<tags name="tags"
ng-model="usedTags"
available-tags="availableTags">
</tags>
<span class="valid"
ng-show="writeForm.tags.$valid">
Valid!
</span>
<span class="invalid"
ng-show="writeForm.tags.$error.taglength">
Invalid!
</span>
</ng-form>
<button type="button"
ng-click="changeModel()">
Change
</button>
</body>
angular.module("directives.tags", [])
.controller('Ctrl', function($scope) {
$scope.usedTags = [];
$scope.availableTags = ['a','b'];
$scope.changeModel = function() {
$scope.usedTags = $scope.usedTags.length === 0 ? ['a'] : [];
};
})
.directive("tags", function() {
return {
require: 'ngModel',
restrict: 'E',
scope: {
ngModel: '=',
availableTags: '='
},
link: function(scope, element, attributes, ctrl) {
ctrl.$validators.taglength = function() {
return scope.ngModel.length > 0;
};
}
};
});
相關的插件在這里http://plnkr.co/edit/SiC8wk
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.