3

我喜欢 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>
4

2 回答 2

0

如何按照您的建议在控制器中创建一个方法：

$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>
于 2015-03-30T21:53:08.787 回答
0

请参阅下面的工作演示 [需要 angular 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>

于 2015-03-30T22:06:47.913 回答