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

#1楼 票数: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>

#2楼 票数:0

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

  ask by joelmdev translate from so

未解决问题?本站智能推荐:

2回复

在Angular验证中禁用ng不能按预期工作

http://plnkr.co/edit/9Yq6aZHtKCuZMtPbjBIN?p=preview 我已经尝试过尝试使它起作用,但是我没有运气。 我正在尝试使用angularJS和内置的验证功能禁用提交按钮。 我发现,当您第一次加载表单时,提交按钮处于活动状态-未被禁用! 经
2回复

表单验证AngularJs上的条件样式

我的电子邮件字段中有minlength,maxlength和required验证。 我想添加一个类'has-error'或添加某个样式,如果这些验证中的任何一个失败。 任何帮助将非常感激。
3回复

Angular.js表单验证如何在Controller中获取值

这是我的HTML部分 调节器 这就是为什么我无法从HTML获取值到Controller的原因
1回复

向angular中的自定义指令添加表单验证

我知道之前曾有人问过这个问题,但我不知道如何在我的问题中实施解决办法。 我在angular中有一个三态布尔指令,我不确定如何向指令添加验证状态,以便表单可以看到我该值有效(不是null) 下面是我到目前为止所拥有的plnkr链接。 有人有想法么? plnkr链接
2回复

为什么在AngullarJs验证中需要name属性

朋友们,我是angularjs的新手,请解释为什么angularjs验证需要name属性 如果我删除name =“userName”代码不起作用,请解释一下。
2回复

AngularJS 1.5.11中的奇怪验证器行为

我们的应用程序仍在使用AngularJS 1.5.11,但我也对版本1.7.2进行了测试,并获得了相同的结果。 问题是validateNumber函数的奇怪行为。 对于每个键入的字符,验证似乎在true和false之间切换。 validateMin和validateMax函数按预期工作
1回复

angularjs-在验证程序指令中评估表达式

我有一个可以获取表达式的自定义验证属性指令,例如: 假设无法使用隔离范围,如何在指令中评估此表达式? 谢谢。
1回复

我可以重构Angular JS验证条件以简化代码吗?

下面的代码是我表单的一行。 我在整个代码段中多次复制了“ AddCarForm.uCarName。$ dirty && AddCarForm.uCarName。$ invalid”。 我可以将其重构为一个变量,随着用户输入的更改/更好的重构方式,该变量将根据条件的答案进行