angularjs表单验证无法应用问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs表单验证无法应用问题相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<script src="js/angular.min.js"></script>
<body>
<div>
<form
name="signup_form"
ng-controller="theform">
<fieldset>
<legend>firstform</legend>
<input type="email"
name="name"
placeholder="email"
ng-maxlength="10"
required/>
<div ng-show="signup_form.name.$dirty&&signup_form.name.$invalid">1</div>
<button type="submit">submit</button>
</fieldset>
</form>
</div>
</body>
</html>
这样写的对吗，但是为什么我的1总是可以显示出来，$dirty与$invalid的功能全都没有用，难道是js有问题？
存在的问题：1.没定义ng-app；2.没写控制器；3.没有head结束标签。
修改代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>
<body>
<div>
<form ng-app="myApp" name="signup_form" ng-controller="theform">
<fieldset>
<legend>firstform</legend>
<input type="email" name="name" placeholder="email" ng-maxlength="10" required/>
<div ng-show="signup_form.name.$dirty&&signup_form.name.$invalid">1</div>
<button type="submit">submit</button>
</fieldset>
</form>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller("theform",function($scope)
);
</script>
</body>
</html> 参考技术A <div class="col-md-6">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-md-4">
<label for="name">1.必填项</label>
</div>
<div class="col-md-8">
<input class="form-control" id="name" type="text" required ng-model='user.name' />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="minlength">2.最小长度=5</label>
</div>
<div class="col-md-8">
<input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="minlength">3.最大长度=20</label>
</div>
<div class="col-md-8">
<input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="minlength">4. 模式匹配</label>
</div>
<div class="col-md-8">
<input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\\d$/" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="email">5. 电子邮件</label>
</div>
<div class="col-md-8">
<input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="age">6. 数字</label>
</div>
<div class="col-md-8">
<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="url"> 7. URL</label>
</div>
<div class="col-md-8">
<input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
</div>
</div>
<div class="form-group text-center">
<input class="btn btn-primary btn-lg" type="submit" value="提交" />
</div>
</form>
</div>
<div class="col-md-12">
1.必填项:user.name<br>
2.最小长度=5:user.minlength<br>
3.最大长度=20:user.maxlength<br>
4.模式匹配:user.pattern<br>
5.电子邮件:user.email<br>
6.数字:user.age<br>
7.URL:user.url<br>
</div>本回答被提问者和网友采纳
AngularJS：列出所有表单错误
【中文标题】AngularJS：列出所有表单错误【英文标题】：AngularJS: list all form errors 【发布时间】：2014-04-14 21:35:25 【问题描述】：背景： 我目前正在开发一个带有标签的应用程序；我想列出验证失败的字段/部分，以指导用户在右侧选项卡中查找错误。
所以我尝试利用form.$error 这样做；但我还没有完全让它发挥作用。
如果在ng-repeat 中发生验证错误，例如：
<div ng-repeat="url in urls" ng-form="form">
<input name="inumber" required ng-model="url" />
<br />
</div>
空值导致form.$error 包含以下内容：
另一方面，如果验证错误发生在ng-repeat之外：
<input ng-model="name" name="iname" required="true" />
form.$error 对象包含以下内容：
"必需": [ ]
然而，我希望得到以下结果：
“必需”：[ 'iname': ]
关于为什么缺少元素名称的任何想法？
可以在此处找到正在运行的 plunkr： http://plnkr.co/x6wQMp
【问题讨论】：
前几天我注意到了这一点。这对我来说没有意义，因为您可以检查form.iname.$error 并获得正确的值。我最终做的是使用form.$valid 来检查有效性并启用提交按钮。
您好 Ed 非常感谢您的回复。我同意，但我想告诉用户哪个控件无法验证。该表单位于选项卡式视图中，因此很容易错过您无法保存的信息，因为您当前未查看的选项卡中的重复中存在验证错误。 （我希望我的解释足够好：））
是的，我同意向用户展示什么是有效的，什么是无效的。一种选择是您可以在<span> 标记中为每个可能的错误添加错误文本，例如使用ng-show="form.fieldName.$error.required"。然后，您可以将它们与输入内联，或者将它们放在提交按钮附近。不过这绝对不理想 - 我想知道未填充的 $error 值是否是有角度的错误？
我相信 $error 被填充了，你不能把它作为 JSON 很好地转储。看这里：plnkr.co/edit/Z47J2W?p=preview 错误类型都可以迭代。
c0bra：谢谢，我会尝试按照您的解决方案，看起来它完全符合我的需要。
【参考方案1】：
正如@c0bra 在 cmets 中指出的那样，form.$error 对象已被填充，它只是不喜欢被作为 JSON 丢弃。
循环通过form.$errors 和它的嵌套对象会得到想要的结果。
<ul>
<li ng-repeat="(key, errors) in form.$error track by $index"> <strong> key </strong> errors
<ul>
<li ng-repeat="e in errors"> e.$name has an error: <strong> key </strong>.</li>
</ul>
</li>
</ul>
所有功劳归于c0bra。
另一种选择是使用this question 中的一种解决方案为动态创建的输入分配唯一名称。
【讨论】：
注意：标签必须具有name 属性才能返回名称。如果您倾向于不分配名称标签，因为角度，它将在 e.$name 处返回空白@
太棒了！！。非常感谢【参考方案2】：
我创建了一个函数，您可以将表单传递给该函数。如果有表单错误，它将在控制台中显示。它显示了对象，以便您查看。我把它放在我的保存功能中。
function formErrors(form)
var errors = [];
for(var key in form.$error)
errors.push(key + "=" + form.$error);
if(errors.length > 0)
console.log("Form Has Errors");
console.log(form.$error);
;
【讨论】：
【参考方案3】：布雷特·德伍迪的回答是正确的。不过，我想在我的控制器中执行逻辑。所以我写了以下内容，这是基于 user5045936 给出的答案。这也可以帮助一些想要走控制器路线的人。顺便说一句，我使用 toaster 指令来显示我的用户验证消息。
if (!vm.myForm.$valid)
var errors = [];
for (var key in vm.myForm.$error)
for (var index = 0; index < vm.myForm.$error[key].length; index++)
errors.push(vm.myForm.$error[key][index].$name + ' is required.');
toaster.pop('warning', 'Information Missing', 'The ' + errors[0]);
return;
【讨论】：
【参考方案4】：如果您有嵌套表单，那么您会发现这很有帮助：
function touchErrorFields(form)
angular.forEach(form.$error, function (field)
angular.forEach(field, function(errorField)
if (!errorField.hasOwnProperty('$setTouched'))
touchErrorFields(errorField);
else
errorField.$setTouched();
)
);
【讨论】：
这个解决方案非常适合在嵌套表单上递归显示错误，谢谢！ @NicolasLeucci，不客气！很高兴它对您有所帮助 使用 angularjs 1.6.2，errorField.hasOwnProperty('$setTouched') 返回 false。以上是关于angularjs表单验证无法应用问题的主要内容，如果未能解决你的问题，请参考以下文章