Angularjs 在Angular中重用验证条件

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

---

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

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

---

请参见下面的工作演示[需要angular 1.3]

var-app=angular.module（'app'，[]）；
app.controller（'firstCtrl'，函数（$scope）{
$scope.shouldShowValidationMessagesFor=函数（表单，字段）{
返回（（字段$toucted | |表单$submitted）和字段$invalid）；
}
});

未验证用户名
无效电子邮件
我认为，
$invalid
仅在
$toucted
之后触发，因此您应该能够取出
$toucted
和
$submitted
。同时查看角度形状的
$error
属性。@DavidGrinberg事实并非如此。页面加载时未通过验证的元素以无效开始。如果不想显示错误消息，请使用$untouched/touched/pristine/dirty。不管怎样，这不是我要说的重点。我认为，无论您设置什么条件，其可重用性都是有用的。