ng-admin - 显示来自服务器的表单验证错误
ng-admin - Displaying form validation errors from the server
抱歉,如果这在某处有记录,但我找不到它。 create/update 在服务器上验证失败后,有没有办法指定字段错误? ng-admin 是否有任何功能可以突出显示有错误的字段?我应该以特定方式格式化我的错误响应吗?
编辑:应该提到我已经通过 app.errorMessage() 配置了错误显示,只是想知道是否有额外的表单字段突出显示功能。
我也没有在文档中找到,所以绕过 Ng-admin
- 使用 AngularJS
。这是我的版本 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
return 我是 Symfony2.
下一版本的 ng-admin 可以使用 usinf 创建和编辑挂钩(参考 https://github.com/marmelab/ng-admin/pull/898):
例如,如果新评论指向的 post_id 不存在,POST /comment REST 端点可能 return 带有 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;
}]);
抱歉,如果这在某处有记录,但我找不到它。 create/update 在服务器上验证失败后,有没有办法指定字段错误? ng-admin 是否有任何功能可以突出显示有错误的字段?我应该以特定方式格式化我的错误响应吗?
编辑:应该提到我已经通过 app.errorMessage() 配置了错误显示,只是想知道是否有额外的表单字段突出显示功能。
我也没有在文档中找到,所以绕过 Ng-admin
- 使用 AngularJS
。这是我的版本 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
return 我是 Symfony2.
下一版本的 ng-admin 可以使用 usinf 创建和编辑挂钩(参考 https://github.com/marmelab/ng-admin/pull/898):
例如,如果新评论指向的 post_id 不存在,POST /comment REST 端点可能 return 带有 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;
}]);