AngularJS中的動態表單驗證 - 有更好的解決方案嗎？

Question

我能夠爲AngularJS應用程序創建基本的動態表單驗證。它是其中一個組合框+輸入字段窗體示例，因此當我更改組合框時，一組新的驗證規則將應用於輸入字段。爲了讓這個例子簡單些，我剛剛使用了一個變量maxlength，當我在組合框中選擇不同的條件時，它會發生變化。在我的真實應用程序中，我也使用正則表達式模式，但使用相同的概念，在組合框更改上應用了不同的模式。

JSFiddle Example

var myApp = angular.module('myApp',[]); 

myApp.controller('MyCtrl', ['$scope', function($scope) { 
     $scope.maxlength = 1; 

     $scope.change = function() { 
     if($scope.type==='LastName') { 
      $scope.maxlength = 10; 
     } 
     else if($scope.type==='UserName') { 
      $scope.maxlength = 6; 
     } 
     } 
    }]); 

我的問題是：是否有比這更好的解決辦法？ 我還是Angular的新手，目前正在學習如何以正確的方式做事。目前，這符合我的目的，但我希望任何AngularJS專家都能提出比我更好的解決方案。謝謝。

Answer 1

您可以擁有一組規則，並將所選規則的值綁定到驗證指令中，如下所示。

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyCtrl', ['$scope', 
 
    function($scope) { 
 
    $scope.rules = [{ 
 
     name: 'UserName', 
 
     maxLength: 6 
 
    }, { 
 
     name: 'FirstName', 
 
     maxLength: 8 
 
    }, { 
 
     name: 'LastName', 
 
     maxLength: 10 
 
    }]; 
 
    $scope.selectedRule = $scope.rules[0]; 
 
    $scope.search = ''; 
 
    } 
 
]);

<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form name="myForm" novalidate> 
 
    <select ng-options="rule.name for rule in rules" ng-model="selectedRule"> 
 
     <option ng-repeat="rule in rules" value="{{rule}}">{{rule.name}}</option> 
 
    </select> 
 
    <input name="searchbox" ng-model="search" ng-maxlength="selectedRule.maxLength" /> 
 
    </form> 
 
    <tt>input valid? = {{myForm.searchbox.$valid}}</tt> 
 
    <br> 
 
    <tt>maxlength = {{selectedRule.maxLength}}</tt> 
 
    <br/> 
 
    <tt>type = {{selectedRule.name}}</tt> 
 
    <br/> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>