显示服务器中的表单验证错误

Question

很抱歉，如果在某个地方记录了这一点，但我找不到它。在服务器上创建/更新失败后，有没有办法指定字段错误？ng admin有什么功能可以突出显示有错误的字段吗？我应该以特定的方式格式化错误响应吗？

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

Answer 1

ng-admin的下一个版本使usinf创建和编辑挂钩成为可能（参考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 injectable（一个列出其依赖项的函数），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;
}]);

Answer 2

我在文档中也找不到，所以用AngularJS绕过了Ng-admin-。这是我使用RestangularProvider和本机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。