Dynamische Formularvalidierung in AngularJS - Gibt es eine bessere Lösung/Vorgehensweise?

Question

Ich bin in der Lage, eine grundlegende dynamische Formularvalidierung für eine AngularJS App zu erstellen. Es ist eines dieser Kombinationsfeld + Eingabefeld Formulare Beispiel, so dass, wenn ich das Kombinationsfeld ändern, eine neue Gruppe von Validierungsregel auf das Eingabefeld angewendet wird. Um die Dinge für dieses Beispiel einfach zu halten, habe ich nur eine Variable maxlength verwendet, die sich ändert, wenn ich im Kombinationsfeld ein anderes Kriterium auswähle. In meiner realen App benutze ich auch das Regex-Muster, aber das gleiche Konzept, ein anderes Muster wird auf den Kombinationsfeldwechsel angewendet.

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; 
     } 
     } 
    }]); 

Meine Frage ist: Gibt es eine bessere Lösung als das? Ich bin noch neu bei Angular und lerne gerade, wie man die Dinge richtig macht. Momentan dient dies meinem Ziel, aber ich hoffe, dass AngularJS-Experten da draußen eine bessere Lösung vorschlagen können als ich. Vielen Dank.

Answer 1

Sie könnten ein Array von Regeln haben und die Werte der ausgewählten Regeln an die entsprechenden Validierungsanweisungen binden.

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>