ng-admin - 显示来自服务器的表单验证错误答案

【问题标题】：ng-admin - Displaying form validation errors from the serverng-admin - 显示来自服务器的表单验证错误
【发布时间】：2015-12-31 17:04:39
【问题描述】：

很抱歉，如果这在某处有记录，但我无法找到它。在服务器上的创建/更新验证失败后，有没有办法指定字段错误？ ng-admin 是否有任何功能可以突出显示有错误的字段？我应该以特定方式格式化我的错误响应吗？

编辑：应该提到我已经通过 app.errorMessage() 配置了错误显示，只是想知道是否有额外的表单字段突出显示功能。

【问题讨论】：

标签： ng-admin

【解决方案1】：

ng-admin 的下一个版本可以使用创建和编辑钩子（参考 https://github.com/marmelab/ng-admin/pull/898）：

例如，如果新评论指向的 post_id 不存在，则 POST /comment REST 端点可能会返回 HTTP 错误代码。

POST /comment
{
    body: 'Commenting on a non-existent post',
    post_id: 123
}

HTTP 1.1 400 Bad Request
[
    { propertyPath: 'post_id', message: 'Related post does not exist' }
]

要捕获并显示这些错误，请使用 editionView.onSubmitError() 和 creationView.onSubmitError() 挂钩。它们接受 Angular 可注入（列出其依赖项的函数），ng-admin 可以注入错误响应、表单对象和许多其他有用的服务。

comment.editionView().onSubmitError(['error', 'form', 'progression', 'notification', function(error, form, progression, notification) {
    // mark fields based on errors from the response
    error.violations.forEach(violation => {
        if (form[violation.propertyPath]) {
            form[violation.propertyPath].$valid = false;
        }
    });
    // stop the progress bar
    progression.done();
    // add a notification
    notification.log(`Some values are invalid, see details in the form`, { addnCls: 'humane-flatty-error' });
    // cancel the default action (default error messages)
    return false;
}]);

【讨论】：

【解决方案2】：

我也没有在文档中找到，所以绕过Ng-admin - 使用AngularJS。这是我的带有RestangularProvider 和原生JS 的版本：

RestangularProvider.setErrorInterceptor(function(response, deferred, responseHandler){
        var removeClass = document.querySelectorAll('.has-error'),
            removeError = document.querySelectorAll('.field-error');
        if(removeClass.length) {
            for(var i in removeClass){
                if(removeClass[i] && removeClass[i].parentElement) {
                    removeClass[i].classList.remove('has-error');
                }
            }
        }
        if(removeError.length > 0) {
            for(var i in removeError){
                if(removeError[i] && removeError[i].parentElement) {
                    removeError[i].parentElement.removeChild(removeError[i]);
                }
            }
        }
        if(response.data && response.data.errors) {
            for(var i in response.data.errors) {
                var element = document.querySelector('#row-' + response.data.errors[i].property_path),
                    newEl = document.createElement('div');
                if(element) {
                    newEl.className = "field-error col-sm-2 col-md-3";
                    newEl.innerHTML = '<div class="alert alert-danger"><strong>' + response.data.errors[i].message + '</strong></div>';
                    element.classList.add('has-error');
                    element.classList.remove('has-success');
                    element.appendChild(newEl);
                }
            }
            response.data = "Ошибка формы";
        }
        return true;
    });

CSS

.has-success .alert {
    display: none;
}
.has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .form-control-feedback, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label {
    color: #3c763d !important;
}
.has-success .form-control,
.has-success .form-control:focus {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
}
.has-success .ta-editor {
    border-color: #3c763d !important;
}
.has-error .ta-editor {
    border-color: #a94442;
}

response.data.errors 还给我 Symfony2。

【讨论】：