AngularJSの動的フォーム検証 - より良いソリューション/アプローチはありますか？

Question

AngularJSアプリの基本的な動的フォーム検証を作成することができました。これらのコンボボックス+入力フィールドフォームの例の1つで、コンボボックスを変更すると、新しい入力規則セットが入力フィールドに適用されます。この例では単純にするため、コンボボックスで別の条件を選択すると変更される変数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>