0

Sorry if this is documented somewhere but I haven't been able to find it. Is there a way to specify field errors after a create/update fails validation on the server? Does ng-admin have any features to highlight the fields with errors? Should I format my error response in a specific way?

EDIT: Should mention that I've already configured error display through app.errorMessage(), just wondering if there's additional form field highlighting features.

4

2 回答 2

3

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()andcreationView.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;
}]);
于 2016-02-01T11:14:27.607 回答
1

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

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。

于 2016-01-29T15:35:18.327 回答