Question

我喜欢Angular的表单验证状态的粒度，但是当你有一个包含大量字段的表单时它会变得有点笨拙 - 甚至两个字段开始让你的标记有点潮湿。请采用以下示例代码段：

<form novalidate name="myForm" ng-submit="myForm.$valid && vm.submit()">
    <div>
        <input type="text" required id="username" name="username" ng-model="vm.username" />
        <div ng-show="(myForm.username.$touched || myForm.$submitted) && myForm.username.$invalid">
            <!--various validation messages here-->
        </div>
    </div>
    <div>
        <input type="email" required id="email" name="email" ng-model="vm.email" />
        <div ng-show="(myForm.email.$touched || myForm.$submitted) && myForm.email.$invalid">
            <!--various validation messages here-->
        </div>
    </div>
</form>

有没有办法做更像以下的事情？

<form novalidate name="myForm" ng-submit="myForm.$valid && vm.submit()">
    <div>
        <input type="text" required id="username" name="username" ng-model="vm.username" />
        <div ng-show="shouldShowValidationMessagesFor(myForm.username)">
            <!--various validation messages here-->
        </div>
    </div>
    <div>
        <input type="email" required id="email" name="email" ng-model="vm.email" />
        <div ng-show="shouldShowValidationMessagesFor(myForm.email)">
            <!--various validation messages here-->
        </div>
    </div>
</form>

Answer 1

如您所建议的那样在控制器中创建方法如何：

$scope.shouldShowValidationMessagesFor = function (field) {
  var form = $scope.myForm;
  return (form[field].$touched || form.$submitted) && form[field].$invalid;
};

在您的视图中，只需传入您需要根据上述逻辑验证的字段名称。

<form novalidate name="myForm" ng-submit="myForm.$valid && vm.submit()">
    <div>
        <input type="text" required id="username" name="username" ng-model="vm.username" />
        <div ng-show="shouldShowValidationMessagesFor('username')">
            <!--various validation messages here-->
        </div>
    </div>
    <div>
        <input type="email" required id="email" name="email" ng-model="vm.email" />
        <div ng-show="shouldShowValidationMessagesFor('email')">
            <!--various validation messages here-->
        </div>
    </div>
</form>

Answer 2

请参阅下面的工作演示[需要角度1.3]

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {

  $scope.shouldShowValidationMessagesFor = function(form, field) {

    return ((field.$touched || form.$submitted) && field.$invalid);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>


<body ng-app="app">
  <div ng-controller="firstCtrl">
    <form novalidate name="myForm" ng-submit="myForm.$valid && vm.submit()">
      <div>
        <input type="text" required id="username" name="username" ng-model="vm.username" />
        <div ng-show="shouldShowValidationMessagesFor(myForm,myForm.username)">
          <!--various validation messages here-->Unvalid username
        </div>
      </div>
      <div>
        <input type="email" required id="email" name="email" ng-model="vm.email" />
        <div ng-show="shouldShowValidationMessagesFor(myForm,myForm.email)">
          <!--various validation messages here-->Unvalid Email
        </div>
      </div>
    </form>

  </div>
</body>

重用Angular中的验证条件

2 个答案: