在Angular的元素指令中創建自定義表單驗證器？

我有一個tags角度元素指令，其操作與Stack Overflow自己的「標籤」輸入字段非常相似，用於解決這裏的問題。在Angular的元素指令中創建自定義表單驗證器？

我想驗證tag元素上的ng-model屬性是至少有一個標籤和少於10個標籤的數組。但是，我不想創建一個單獨的指令來驗證它，因爲我再也不需要驗證數組的長度了。我希望邏輯能夠被包含在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驗證不工作，或者我，否則不具約束力它正確。有任何想法嗎？

來源

2015-09-03 ReactingToAngularVues

你不應該要麼選擇'標籤= 「usedTagsArray」'在你的模板或'ngModel：' =''在你的指令的範圍內？ –

我對Angular沒有足夠的瞭解來回答這個問題。 – ReactingToAngularVues

排序！但是你的答案仍然不完全。函數'ctrl。$ validators.ngModel'只在頁面加載時被調用一次。它在模型更改時不會再被調用。爲什麼？ – ReactingToAngularVues

在您的模板中，您需要引用元素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; 
     }; 
     } 
    }; 
    });

相關plunker http://plnkr.co/edit/SiC8wk

來源

2015-09-03 10:30:16

在Angular的元素指令中創建自定義表單驗證器？

回答

相關問題