Question

我使用Angular 1.4.7并希望在提交表单时显示字段验证错误（而不是在字段内容发生更改时）。我目前的方法如下：

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet"/>
    <script>
        angular.module("exampleApp", [])
                .controller("defaultCtrl", function ($scope) {
                    $scope.addUser = function (userDetails) {
                        if (myForm.$valid) {
                            // send form data to server, or whatever....
                        } else {
                            $scope.showValidation = true;
                        }
                    };

                    $scope.getError = function (error) {
                        if (angular.isDefined(error)) {
                            if (error.required) {
                                return "Please enter a value";
                            } else if (error.email) {
                                return "Please enter a valid email address";
                            }
                        }
                    }
                });
    </script>
    <style>
        form.validate .ng-invalid-required.ng-dirty {
            background-color: lightpink;
        }

        form.validate .ng-invalid-email.ng-dirty {
            background-color: lightgoldenrodyellow;
        }

        div.error {
            color: red; font-weight: bold;
        }
    </style>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
    <form name="myForm" novalidate ng-submit="addUser(newUser)"
          ng-class="showValidation ? 'validate' : ''">
        <div class="well">
            <div class="form-group">
                <label>Email:</label>
                <input name="userEmail" type="email" class="form-control"
                       required ng-model="newUser.email">
                <div class="error" ng-show="showValidation">
                    {{getError(myForm.userEmail.$error)}}
                </div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">OK</button>
        </div>
    </form>
</div>
</body>
</html>

请注意，$scope.showValidation用于确保在提交表单之前不显示验证消息。 $scope.getError用于减少确定要显示哪条消息所需的标记量（尽管在此示例中，表单只有一个字段）。

我觉得必须有一个更好的方法，当一个表单有很多字段时，显示相应错误消息所需的代码变得非常冗长，并且有几种不同的字段可能无效的方式。有没有办法简化上面的代码或使其更简洁？

Answer 1

稍微好一点的方法是使用ng-messages。

From the docs:

<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
</div>

另一种方法是通过JavaScript完全控制form。有一个很好的库叫formly，可以为你减少所有的样板代码。

Answer 2

如果表单已发送，您可以使用$submitted进行检查。 $touched可用于检查表单元素是否已被修改。

作为IMO提供反馈的最佳方式，无论是否作为表单元素有效，我都会尽快使用这样的检查来确保如果元素无效且已经有焦点则显示错误消息（即填写错误）或表格已提交。这看起来像这样（如果您想要打印“太短”等自定义错误消息，可能会更复杂。）

function isInvalid(form, elem) {
    return (elem.$touched || form.$submitted) && elem.$error;
}

简明的角度形式验证

2 个答案: