如何使用 AngularJS 在屏幕上显示来自 REST 服务的验证消息？

Question

我有一个这样的控制器：

(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;

现在的问题是，在再次提交表单并更改此字段的内容以使其生效后，之前的验证消息仍保留在屏幕上，即使其他字段有错误。

如何在每次发送表单数据时清除控制器上的这些消息？

Answer 1

我强烈建议将 ngMessages 的使用与 promise 解析中的一些自定义逻辑相结合，以适当地设置错误状态。

这是 ngMessages 用法的一个很好的例子 - http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html

Answer 2

最简单的做法是将错误分配给视图模型的成员，然后简单地将这些成员输出到各自的 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 = "" ;}

});

不是特别优雅，但可以完成工作。

Answer 3

我是这样解决的：

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;

如何使用 AngularJS 在屏幕上显示来自 REST 服务的验证消息？

How show validation messages from REST service on screen with AngularJS?

angularjs

rest

ng-messages