简洁的 Angular 表单验证答案

【问题标题】：concise Angular form validation简洁的 Angular 表单验证
【发布时间】：2016-06-24 17:44:45
【问题描述】：

我正在使用 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 用于减少确定要显示哪条消息所需的标记数量（尽管在此示例中表单只有一个字段）。

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

【问题讨论】：

标签： javascript angularjs forms validation

【解决方案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，它为您减少了所有样板代码。

【讨论】：

【解决方案2】：

您可以使用$submitted 来检查表格是否已经发送。 $touched 可用于检查表单元素是否已被修改。

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

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

【讨论】：