如何驗證Angular中的非表單元素？

我在表單上使用angular-bootstrap-ui-dropdown。我想對這個元素進行一些驗證。 Angular Validator有可能嗎？如何驗證Angular中的非表單元素？

代碼目前看起來如下，所有這些都在一個形式元件，我設法來驗證其它標準表格元素（例如輸入等）

<div class="btn-group" uib-keyboard-nav uib-dropdown> 
    <button id="salutation-button" type="button" class="btn btn-primary" uib-dropdown-toggle> 
     <span class="dp-caption">{{passenger.salutation || 'Salutation'}}</span> <span 
      class="fa fa-angle-down"></span> 
    </button> 
    <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button"> 
     <li ng-repeat="salutation in salutationList" ng-click="setSalutation(salutation)" 
      role="menuitem"><a href="#">{{salutation}}</a></li> 
    </ul> 
</div>

是否有可能以驗證是否存在在此下拉列表中選擇的值？

來源

2015-12-04 nipuna777

您可以使用下拉內建方法進行驗證。 – ngLover

@ngLover文檔[這裏]（https://angular-ui.github.io/bootstrap/#/dropdown）似乎沒有解釋我將如何去做。此外，下拉菜單上的應用類似乎不會根據選擇而改變。 – nipuna777

您可以添加$validators to the ngModelController（假設您正在使用ngModel）。例如，在你的指令，你可以要求它，並添加驗證你能想到：

與允許名稱中的一個簡單的列表變量：

var allowedNames = [...array with names...]

...這可能是該指令的一部分：

... 
    require: '?ngModel', 
    link: function (scope, iElement, iAttribute, ngModel) { 
     var $validators = { // object with one or more validators 
      isNameAllowed: function (modelValue, viewValue) { 
       var value = modelValue || viewValue; 

       if (!value || allowedNames.indexOf(value) > -1) { 
        return true; 
       } else { 
        return false; 
       } 
      } 
     }; 

     ngModel.$validators = angular.extend({}, ngModel.$validators, $validators); 
     ... 
    } 
    ...

在這個例子中，我添加了一個名爲「isNameAllowed」一個簡單的校驗來檢查，如果在模型中的價值是在允許的名稱列表。

來源

2015-12-05 14:05:39 Rumoroso

如何驗證Angular中的非表單元素？

回答

相關問題