Как показывать сообщения проверки из службы REST на экране с помощью AngularJS?

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 делает его валидации и возвращение (ответ) 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> 

EDIT

В поисках 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> 

Я изменил контроллер, чтобы показать Validations сообщения, когда необходимо:

case 422: angular.forEach(data, function(value, key){ 
       // I set the field invalid 
       vm.bookmarkForm[value.property].$setValidity(value.message, false); 
      }); 
      break; 

Теперь проблема заключается в том, что предыдущие Validations сообщения остаются на экране после повторного заполнения формы и изменить содержание этого поля так, что становится действительным, хотя другие поля ошибочны.

Как очищать эти сообщения от контроллера каждый раз, когда вы отправляете данные формы?

Answer 1

Я решил так:

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; 

Answer 2

Я настоятельно рекомендую объединить использование ngMessages и некоторой пользовательской логики для решения обещаний, чтобы правильно установить состояния ошибок.

Вот отличный пример использования для ngMessages - http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html

Answer 3

Проще всего сделать было бы присвоить ошибки членам вашей модели представления, а затем просто вывода этих членов в их соответствующих дивы.

Что-то вроде:

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 = "" ;} 

}); 

Не супер элегантный, но это будет получить работу.