将自定义错误添加到AngularJS验证指令中，并在弹出窗口中显示所有错误

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内部，我有验证数据，例如我需要测试的正则对象，如果验证失败，则需要显示错误消息。checkFieldValidation如果验证失败，则返回所需的错误消息，否则它将返回一个空字符串。我想将此指令用于我的所有表单元素，我想在弹出窗口中显示所有返回的错误。

验证本身有效，但我似乎找不到如何使用这些错误消息。

我不知道使用Angular的指令是我案件的最佳解决方案，我对解决我的问题的另一种解决方案开放。

Answer 1

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

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

您可以看到此编码词，以查看所有操作的工作原理。如果要在$错误中设置消息，只需使用错误名称将其设置在控制器上：

 $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((函数，例如(请注意，您必须在范围内将其链接到elsewwise中，它不会在html文件中定义，因此我的getKeys函数(((：

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