我在控制器内部的 AngularJS 应用程序中有以下代码，
从 ng-submit 函数调用，该函数属于名称为 profileForm 的表单：
$scope.updateProfile = function() {
if($scope.profileForm.$invalid) {
//error handling..
}
//etc.
};
在这个函数内部，有没有办法找出哪些字段导致整个表单被调用无效？
【问题讨论】：
标签： validation angularjs
每个输入name 的验证信息都作为form 名称中的属性公开在scope 中。
HTML
<form name="someForm" action="/">
<input name="username" required />
<input name="password" type="password" required />
</form>
JS
$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }
公开的属性是$pristine、$dirty、$valid、$invalid、$error。
如果您出于某种原因想要遍历错误：
$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
// {$name: "password", /*..*/}] }
每条出错的规则都会暴露在 $error 中。
这是一个可以和http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview一起玩的plunkr
【讨论】：
name 属性才能在 $name 中看到它（当然）。 AngularJS 绑定到模型属性而不需要名称这一事实可能导致难以诊断哪个输入无效。
用于检查表单的哪个字段无效
console.log($scope.FORM_NAME.$error.required);
这将输出表单的无效字段数组
【讨论】：
如果您想查看哪些字段与您的验证有关并且您有 jQuery 来帮助您，只需在 javascript 控制台上搜索 "ng-invalid" 类。
$('.ng-invalid');
它将列出所有因任何原因未能通过验证的 DOM 元素。
【讨论】：
您可以循环访问form.$error.pattern。
$scope.updateProfile = function() {
var error = $scope.profileForm.$error;
angular.forEach(error.pattern, function(field){
if(field.$invalid){
var fieldName = field.$name;
....
}
});
}
【讨论】：
我想在禁用的保存按钮工具提示中显示所有错误，以便用户知道为什么禁用而不是上下滚动长表单。
if (frm) {
disable = frm.$invalid;
if (frm.$invalid && frm.$error && frm.$error.required) {
frm.$error.required.forEach(function (error) {
disableArray.push(error.$name + ' is required');
});
}
}
if (disableArray.length > 0) {
vm.disableMessage = disableArray.toString();
}
【讨论】：
当任何字段无效时，如果您尝试获取其值，它将是undefined。
假设您有一个附加到$scope.mynum 的文本输入，该输入仅在您输入数字时有效，并且您在其上输入了ABC。
如果您尝试获取$scope.mynum 的值，它将是undefined；它不会返回ABC。
（可能你都知道，但无论如何）
因此，我将使用一个数组，其中包含我已添加到范围中的所有需要验证的元素，并使用过滤器（例如使用 underscore.js）来检查哪些返回为typeofundefined。
那些将是导致无效状态的字段。
【讨论】：
对于我的应用程序，我显示如下错误：
<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>
如果您想查看所有内容，只需用户 'err' 会显示如下内容：
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}
格式不是很好，但你会在那里看到这些东西......
【讨论】：
如果您想在不以编程方式在 UI 上查找使表单无效的字段，只需右键单击检查（在元素视图中打开开发人员工具），然后在此选项卡中使用 ctrl+f 搜索 ng-invalid。然后，对于您找到 ng-invalid 类的每个字段，您可以检查字段是否在需要时没有给出任何值，或者它可能违反的其他规则（无效的电子邮件格式、超出范围/最大/最小定义等） .这是最简单的方法。
【讨论】：