重用Angular中的验证条件
[英]Reusing validation conditions in 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>
2 个解决方案
解决方案1
0 2015-03-30 21:53:08
如你所知，如何在控制器中创建方法：
$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
0 2015-03-30 22:06:47
请参阅下面的工作演示[需要角度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 Interceports中的重用方法
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.