Question

我编写了一个执行验证的angularjs指令，这是代码：

app.directive('modelValidation', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attr, ctrl) {
        var modelFieldName = attr.ngModel;
        var model = scope.validationModel;
        var valid;

        // scope.validationModel is being loaded async so we need to watch when the promise is resolved.
        scope.$watch('validationModel', function (newVal, oldVal) {
            if (newVal) { model = scope.validationModel; }
        }, true);

        //For model -> DOM validation
        ctrl.$formatters.unshift(function (value) {
            valid = true;
            if (model != undefined) {
                if (modelFieldName in model) {
                    var errorMessage = checkFieldValidation(model, modelFieldName, value);
                    if (errorMessage.length > 0) {
                        valid = false;
                    }
                } 
            } 

            ctrl.$setValidity('modelValidation', valid);
            return valid ? value : undefined;
        });
    }
};
});

字段scope.validationModel包含从服务器返回的json对象，在此json中，我有验证数据，例如我需要测试的regEx以及验证失败时要显示的错误消息。如果验证失败，checkFieldValidation将返回所需的错误消息，否则返回空字符串。我想对所有表单元素使用this指令，并且我想在弹出窗口中显示所有返回的错误。

验证本身有效，但我似乎无法根据需要找到如何使用这些错误消息。

我不知道使用角度指令是否是我案例的最佳解决方案，我愿意接受另一种解决方案来解决我的问题。

Answer 1

您应该使用ng-messages指令。这样，在每个输入下方都可以显示正确的错误消息。您可以查看此codepen

对于对话框，您可以使用form。$ error来获取所有错误及其正确的错误消息。

您可以看到此codepen，看看它是如何运作的。如果要在$ error中设置消息，只需使用错误名称在控制器上设置它们，如：

 $scope.userForm.name.error_required = "This is required !"
 $scope.userForm.username.error_minlength = "This is too short !"
 $scope.userForm.username.error_maxlength = "This is too long !"
 $scope.userForm.email.error_email = "This is not an email.."

然后在html中使用Object.keys（）函数，如（注意你必须在你的范围内链接它，否则它不会在你的html文件中定义，因此我的getKeys函数）：

{{userForm.email['error_' + getKeys(userForm.email.$error)]}}

向angularjs validation指令添加自定义错误，并在弹出窗口中显示所有错误

1 个答案: