Question

我使用angularjs进行了表单验证。但我遇到的问题是页面加载时显示的错误消息。但是这个消息会在收到错误后显示出来。只是我想要使用指令设置验证摘要的余数。我该怎么办？

我的代码如下：

<label>UserName</label>
<input type="text" class="form-control" name="UserName" ng-model="userVM.UserName" required ng-minlength="8" ng-maxlength="20" />
<div validation-message ng-show="customerForm.UserName.$error.required" class="error">
                    Username is required
</div>

指令如下：

NusPayApp.directive("validationSummary", function () {
    return {
        restrict: "A",
        require: "^form",

        template: "<div class='alert alert-warning'><a class='close' ng-click='toggleValidationSummary()'>×</a><h4 class='alert-heading'>Warning!</h4><li ng-repeat='(expression,message) in validationMessages'>{{message}}</li></ul></div>",
        link: function (scope, element, attributes, controller) {

            scope.validationMessages = {};

            // Hooks up a watch using [ng-show] expression
            controller.watchValidation = function (expression, message) {

                // watch the return value from the scope.$eval(expression)
                scope.$watch(function () { return scope.$eval(expression); }, function (isVisible) {

                    // check if the validation message exists
                    var containsMessage = scope.validationMessages.hasOwnProperty(expression);

                    // if the validation message doesn't exist and it should be visible, add it to the list
                    if (!containsMessage && isVisible) {
                        scope.validationMessages[expression] = message;
                    }

                    // if the validation message does exist and it shouldn't be visible, delete it
                    if (containsMessage && !isVisible) {
                        delete scope.validationMessages[expression];
                    }
                });
            };
        }
    };
});

让我帮忙给我一些建议。我需要确保在表单提交后显示错误消息。

Answer 1

您可以在范围中添加新变量以检查表单是否已提交。

$scope.isFormSubmit = false

然后，如果您的表单有错误，请将此标记更新为true

if($scope.form.$valid)
{
      //Submit your form
      $scope.isFormSubmit = false
}
else
{
     $scope.isFormSubmit = true
}

将您的HTML代码更新为

<div validation-message ng-show="customerForm.UserName.$error.required && isFormSubmit" class="error">
 Username is required
</div>

在angularjs表单验证中提交表单之前显示的错误消息

1 个答案: