在 Angular 中重用验证条件答案

【问题标题】：Reusing validation conditions in Angular在 Angular 中重用验证条件
【发布时间】：2015-03-30 21:37:05
【问题描述】：

我喜欢 Angular 表单验证状态的粒度，但是当你有一个包含很多字段的表单时，它会变得有点笨拙——即使是两个字段也会让你的标记变得有点模糊。以sn-p为例：

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

【问题讨论】：

我相信$invalid只会在$touched之后触发，所以你应该可以直接取出$touched和$submitted。
还可以查看角度形式的$error 属性。
@DavidGrinberg 事实并非如此。在页面加载时未通过验证的元素一开始是无效的。如果您不想显示错误消息，请使用 $untouched/touched/pristine/dirty。无论如何，这不是我要在这里得到的重点。我认为您设置的任何条件的可重用性都是有用的。

标签： angularjs angularjs-validation

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：