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

Question

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

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

在这个函数内部,有没有办法弄清楚哪些字段导致整个表单被称为无效？

Answer 1

每个输入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的玩家

Answer 2

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

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

这将输出表单的无效字段数组

Answer 3

如果你想看看哪些字段弄乱你的验证并且你有jQuery来帮助你,只需在javascript控制台上搜索"ng-invalid"类.

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