Question

我在AngularJS应用程序中有以下代码，在控制器内部，从ng-submit函数调用，该函数属于名为profileForm的表单：

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

在这个函数内部，有没有办法找出哪些字段导致整个表单被调用无效？

Answer 1

每个输入name的验证信息都在form的{{1}}名称中显示为属性。

HTML

scope

JS

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

公开的属性为$scope.someForm.username.$valid // > false $scope.someForm.password.$error // > { required: true }，$pristine，$dirty，$valid，$invalid。

如果您想因某些原因迭代错误：

$error

错误中的每个规则都将以$ error显示。

这是一个与http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

一起玩的傻瓜

Answer 2

用于检查表单的哪个字段无效

console.log($scope.FORM_NAME.$error.required);

这将输出格式为

的无效字段数组

Answer 3

如果您想查看哪些字段搞砸了您的验证并且您有jQuery来帮助您，只需在javascript控制台上搜索＆＃34; ng-invalid＆＃34; 类

$('.ng-invalid');

它将列出因任何原因验证失败的所有DOM元素。

Answer 4

您可以循环浏览form.$error.pattern。

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

Answer 5

当任何字段无效时，如果您尝试获取其值，则为undefined。

假设您有一个附加到$scope.mynum的文字输入，该输入只有在您输入数字时才有效，并且您已在其上键入ABC。

如果您尝试获取$scope.mynum的值，则为undefined;它不会返回ABC。

（可能你知道这一切，但无论如何）

所以，我会使用一个数组，其中包含我已添加到范围内的所有需要验证的元素，并使用过滤器（例如使用underscore.js）来检查哪些元素返回为typeof {{ 1}}。

那些会导致无效状态的字段。

Answer 6

我想在禁用的“保存”按钮工具提示中显示所有错误，因此用户将知道为什么禁用而不是向上和向下滚动长形式。

注意：请记住将name属性添加到表单

中的字段

<Query><Where><Contains><FieldRef Name='Location' /><Value Type='Lookup'>{$Location}</Value></Contains></Where></Query>

Answer 7

对于我的应用程序，我显示如下错误：

<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": {}

格式不正确，但是您会在此处看到这些内容...

Answer 8

如果要查找无需编程即可使UI上的表单无效的字段，只需右键单击检查（在元素视图中打开开发人员工具），然后在此标签内使用ctrl + f搜索ng-invalid。然后针对您发现ng-invalid类的每个字段，可以检查字段是否在需要时未提供任何值，或者是否可能违反其他规则（无效的电子邮件格式，超出范围/最大/最小定义等）。。这是最简单的方法。

AngularJS：有没有办法确定哪些字段使表单无效？

8 个答案:

注意：请记住将name属性添加到表单