如何使用 AngularJS 在屏幕上显示来自 REST 服务的验证消息?
How show validation messages from REST service on screen with AngularJS?
我有一个这样的控制器:
(function() {
'use strict';
angular
.module('app.bookmark')
.controller('BookmarkEdit', BookmarkEdit);
function BookmarkEdit(BookmarkService, $stateParams, $state) {
var vm = this;
vm.bookmark = {};
vm.save = save;
function save() {
BookmarkService.insert(vm.bookmark).success(saveOk).error(saveFail);
}
/* Callbacks */
// I ommited the saveOk method!
function saveFail(data, status, headers, config){
switch(status){
case 401: console.log('401');
break;
case 422: console.log('422');
angular.forEach(data, function(value, key){
// THE CODE SHOULD COME HERE
});
break;
}
}
}})();
我的服务是这样的:
(function() {
'use strict';
angular
.module('app.bookmark')
.factory('BookmarkService', BookmarkService);
function BookmarkService($http){
var url = 'api/bookmark';
BookmarkService.insert = function(bookmark){
return $http.post(url, bookmark);
};
return BookmarkService;
}})();
如果我发送空表单,我的 REST 服务会进行验证并 return(响应)一个 JSON,如下所示:
[
{property:description, message:required}
{property:link, message:maxlength}
]
我想知道如何在相应字段下方显示这些消息?
下面是我的 HTML 代码:
<form name="bookmarkForm class="well" role="form">
<div class="form-group">
<label>ID: </label>
<span id="id-text" class="form-control-static">{{bookmark.bookmark.id}}</span>
</div>
<div class="form-group">
<label for="description">Description</label>
<input id="description" type="text" class="form-control" ng-model="bookmark.bookmark.description" value="{{bookmark.bookmark.description}}">
<div id="description-message" class="label label-danger"><!-- the message should come here if exists --></div>
</div>
<div class="form-group">
<label for="link">Link</label>
<input id="link" type="text" class="form-control" ng-model="bookmark.bookmark.link" value="{{bookmark.bookmark.link}}">
<div id="link-message" class="label label-danger"><!-- the message should come here if exists --></div>
</div>
<div class="form-group">
<button id="save" class="btn btn-primary" ng-click="bookmark.save()">Save</button>
</div>
</form>
编辑
寻找 ngMessages,我将 DIV 的消息更改为:
<div class="label label-danger" ng-messages="bookmarkForm.description.$error">
<div ng-messages-include="templates/messages.html"></div>
</div>
而 messages.html 文件是这样的:
<p ng-message="required" class="label label-danger">Required field</p>
<p ng-message="minlength" class="label label-danger">Few letters</p>
<p ng-message="manlength" class="label label-danger">Too much letters</p>
<p ng-message="url" class="label label-danger">Invalid URL</p>
我更改了控制器以在必要时显示验证消息:
case 422: angular.forEach(data, function(value, key){
// I set the field invalid
vm.bookmarkForm[value.property].$setValidity(value.message, false);
});
break;
现在的问题是,在再次提交表单并更改此字段的内容以使其生效后,之前的验证消息仍保留在屏幕上,即使其他字段有错误。
如何在每次发送表单数据时清除控制器上的这些消息?
我强烈建议将 ngMessages 的使用与 promise 解析中的一些自定义逻辑相结合,以适当地设置错误状态。
这是 ngMessages 用法的一个很好的例子 - http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
最简单的做法是将错误分配给视图模型的成员,然后简单地将这些成员输出到各自的 div 中。
类似于:
angular.forEach(data, function(value, key){
if (value.property === "link") {
vm.linkError = value.message; }
else {
vm.linkError = "" ;}
if (value.property === "description") {
vm.descriptionError = value.message; }
else {
vm.descriptionError = "" ;}
});
不是特别优雅,但可以完成工作。
我是这样解决的:
case 422:
angular.forEach(vm.bookmarkForm, function(value, i) {
if (typeof value === 'object' && value.hasOwnProperty('$modelValue')) {
vm.bookmarkForm[value.$name].$setValidity(Object.getOwnPropertyNames(value.$error)[0], true);
}
});
angular.forEach(data, function(value, key) {
vm.bookmarkForm[value.property].$setValidity(value.message, false);
});
break;
我有一个这样的控制器:
(function() {
'use strict';
angular
.module('app.bookmark')
.controller('BookmarkEdit', BookmarkEdit);
function BookmarkEdit(BookmarkService, $stateParams, $state) {
var vm = this;
vm.bookmark = {};
vm.save = save;
function save() {
BookmarkService.insert(vm.bookmark).success(saveOk).error(saveFail);
}
/* Callbacks */
// I ommited the saveOk method!
function saveFail(data, status, headers, config){
switch(status){
case 401: console.log('401');
break;
case 422: console.log('422');
angular.forEach(data, function(value, key){
// THE CODE SHOULD COME HERE
});
break;
}
}
}})();
我的服务是这样的:
(function() {
'use strict';
angular
.module('app.bookmark')
.factory('BookmarkService', BookmarkService);
function BookmarkService($http){
var url = 'api/bookmark';
BookmarkService.insert = function(bookmark){
return $http.post(url, bookmark);
};
return BookmarkService;
}})();
如果我发送空表单,我的 REST 服务会进行验证并 return(响应)一个 JSON,如下所示:
[
{property:description, message:required}
{property:link, message:maxlength}
]
我想知道如何在相应字段下方显示这些消息?
下面是我的 HTML 代码:
<form name="bookmarkForm class="well" role="form">
<div class="form-group">
<label>ID: </label>
<span id="id-text" class="form-control-static">{{bookmark.bookmark.id}}</span>
</div>
<div class="form-group">
<label for="description">Description</label>
<input id="description" type="text" class="form-control" ng-model="bookmark.bookmark.description" value="{{bookmark.bookmark.description}}">
<div id="description-message" class="label label-danger"><!-- the message should come here if exists --></div>
</div>
<div class="form-group">
<label for="link">Link</label>
<input id="link" type="text" class="form-control" ng-model="bookmark.bookmark.link" value="{{bookmark.bookmark.link}}">
<div id="link-message" class="label label-danger"><!-- the message should come here if exists --></div>
</div>
<div class="form-group">
<button id="save" class="btn btn-primary" ng-click="bookmark.save()">Save</button>
</div>
</form>
编辑
寻找 ngMessages,我将 DIV 的消息更改为:
<div class="label label-danger" ng-messages="bookmarkForm.description.$error">
<div ng-messages-include="templates/messages.html"></div>
</div>
而 messages.html 文件是这样的:
<p ng-message="required" class="label label-danger">Required field</p>
<p ng-message="minlength" class="label label-danger">Few letters</p>
<p ng-message="manlength" class="label label-danger">Too much letters</p>
<p ng-message="url" class="label label-danger">Invalid URL</p>
我更改了控制器以在必要时显示验证消息:
case 422: angular.forEach(data, function(value, key){
// I set the field invalid
vm.bookmarkForm[value.property].$setValidity(value.message, false);
});
break;
现在的问题是,在再次提交表单并更改此字段的内容以使其生效后,之前的验证消息仍保留在屏幕上,即使其他字段有错误。
如何在每次发送表单数据时清除控制器上的这些消息?
我强烈建议将 ngMessages 的使用与 promise 解析中的一些自定义逻辑相结合,以适当地设置错误状态。
这是 ngMessages 用法的一个很好的例子 - http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
最简单的做法是将错误分配给视图模型的成员,然后简单地将这些成员输出到各自的 div 中。
类似于:
angular.forEach(data, function(value, key){
if (value.property === "link") {
vm.linkError = value.message; }
else {
vm.linkError = "" ;}
if (value.property === "description") {
vm.descriptionError = value.message; }
else {
vm.descriptionError = "" ;}
});
不是特别优雅,但可以完成工作。
我是这样解决的:
case 422:
angular.forEach(vm.bookmarkForm, function(value, i) {
if (typeof value === 'object' && value.hasOwnProperty('$modelValue')) {
vm.bookmarkForm[value.$name].$setValidity(Object.getOwnPropertyNames(value.$error)[0], true);
}
});
angular.forEach(data, function(value, key) {
vm.bookmarkForm[value.property].$setValidity(value.message, false);
});
break;