AngularJS：有什么方法可以确定哪些字段使表单无效？

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

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

在此函数的内部，是否有任何方法可以找出导致整个表单无效的字段？

每个输入 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一起玩的pl客

用于检查哪个字段无效

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;
            ....
        }
    });
}

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

假设您附加了一个文本输入$scope.mynum，仅当您键入数字并且键入时，此输入才有效ABC在其上。

如果您试图获得的价值$scope.mynum，那将会是undefined; 它不会返回ABC。

（也许您知道所有这些，但是无论如何）

因此，我将使用一个数组，该数组具有已添加到范围中的所有需要​​验证的元素，并使用一个过滤器（例如，使用underscore.js）来检查哪些返回为 typeof undefined。

这些将是导致无效状态的字段。

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

注意：请记住将名称属性添加到表单中的字段

    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();
    }

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

<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类的每个字段，可以检查字段是否为必填字段，或者是否可能违反其他规则（无效的电子邮件格式，超出范围/最大/最小定义等）。 。这是最简单的方法。