0

次のようなコントローラーがあります。

(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 を返します (RESPONSE)。

[
{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;

ここでの問題は、フォームを再度送信した後も以前の検証メッセージが画面に残り、このフィールドの内容を変更して、他のフィールドにエラーがある場合でも有効になることです。

フォームデータを送信するたびにコントローラーでこれらのメッセージをクリアする方法は?

4

3 に答える 3

1

最も簡単な方法は、エラーをビュー モデルのメンバーに割り当ててから、それらのメンバーをそれぞれの 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 = "" ;}

});

それほどエレガントではありませんが、それで仕事は完了します。

于 2015-09-22T18:39:34.667 に答える
0

私はこのように解決しました：

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;
于 2015-09-30T18:52:42.567 に答える