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

您可以拥有一系列规则，并将所选规则的值绑定到这样的验证指令。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: