97

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

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

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

4

8 回答 8

95

每个输入name的验证信息都作为属性在form's name in 中公开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 中公开。

这是一个可以玩的 plunkr http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

于 2013-08-16T21:08:57.943 回答
28

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

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

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

于 2015-02-27T14:34:27.577 回答
15

如果您想查看哪些字段影响了您的验证并且您有 jQuery 来帮助您，只需在 javascript 控制台上搜索“ng-invalid”类。

$('.ng-invalid');

它将列出所有因任何原因未能通过验证的 DOM 元素。

于 2016-07-05T14:08:44.127 回答
12

你可以循环遍历form.$error.pattern。

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}
于 2013-08-16T20:53:33.760 回答
3

我想在禁用的保存按钮工具提示中显示所有错误，这样用户就会知道为什么禁用而不是上下滚动长表单。

注意：记得在表单中的字段中添加 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();
    }
于 2016-11-22T20:03:34.190 回答
2

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

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

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

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

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

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

于 2013-08-16T20:56:01.683 回答
2

如果您想在没有编程方式的情况下查找使 UI 上的表单无效的字段，只需右键单击检查（在元素视图中打开开发人员工具），然后在此选项卡中使用 ctrl+f 搜索 ng-invalid。然后，对于您找到 ng-invalid 类的每个字段，您可以检查字段是否在需要时没有给出任何值，或者它可能违反的其他规则（无效的电子邮件格式、超出范围/最大/最小定义等） . 这是最简单的方法。

于 2018-10-23T12:07:07.430 回答
2

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

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

格式不是很好，但你会在那里看到这些东西......

于 2018-10-10T20:28:22.657 回答