javascript - AngularJS 中的动态表单验证 - 有更好的解决方案/方法吗？

Question

我能够为 AngularJS 应用程序创建基本的动态表单验证。这是组合框+输入字段表单示例之一，因此当我更改组合框时，一组新的验证规则将应用于输入字段。为了使本示例保持简单，我只使用了一个变量 maxlength，当我在组合框中选择不同的条件时，该变量 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

您可以拥有一组规则，并将所选规则的值绑定(bind)到验证指令，如下所示。

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>