2016-05-16 4 views
2

私はanglejsを使用してフォーム要素のサーバー側の検証を実装しようとしています。ngMessagesモジュールを使用してサーバー側のanglejsメッセージをクリアする方法

私はこの質問に答えました(解決策の基礎としてその質問に対する最後の答えを使用します)。

How to display server errors in Angularjs with ng-messages

そして、この記事からの助けを借りて:http://codetunes.com/2013/server-form-validation-with-angular/ - 私は、値が変更された後、ディレクティブを使用してエラーメッセージをクリアしようとしています。

問題は、フィールドのハンドルを取得して入力の有効性をリセットする方法がわかりません。以下のコードは基本的に記事からコピーされましたが、ng-messagesモジュールでは動作しません。

angular.module('OCS') 
    .directive('serverError', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs, ctrl) { 
     element.on('change', function (ev) { 
     scope.$apply(function() { 
      scope.$setValidity('server', true); 
     }) 
     }); 
    } 
    } 
}); 

以下のコードは、サーバーからの応答を読み取り、エラーメッセージを表示します。 (これが機能している)

if (response.status === 400) { 
    response.data.forEach(function(fieldMsg){ 
     form[fieldMsg.param].$setValidity('server', false); 
     if (!$scope.formErrors){ 
     $scope.formErrors = {}; 
     } 
     $translate('errors.' + fieldMsg.msg).then(function(msg){ 
     $scope.formErrors[fieldMsg.param] = msg; 
     }); 
    }); 

入力の例:

<div layout-gt-sm="row"> 
    <md-input-container flex-gt-sm="50"> 
     <label>{{'pages.profilePage.email' | translate}}</label> 
     <input type="email" ng-model="profileDetails.email" name="email" class="md-input md-input-white" required server-error> 
     <div ng-messages="updateProfileForm.email.$error" ng-if='updateProfileForm.email.$dirty'> 
      <div ng-messages-include="error-messages"></div> 
      <div ng-message="server">{{formErrors.email}}</div> 
     </div> 
    </md-input-container> 
</div> 
  1. は、サーバーエラーを表示すると正常に動作します。
  2. ディレクティブが登録され、発生します。

    form[element[0].name].$setValidity('server', true);

    をしかし、どのように、私は、フォームの名前を知らなくても、ディレクティブ内からcurrent formへの参照を取得することができます:

基本的に、私はディレクティブの中からより多くのこのような何かを実行する必要がありますか?

----------------ここで編集--------------これは私が一緒に行ったものです

、私は

angular.module('OCS') 
    .directive('serverError', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs, ctrl) { 
     element.on('change', function (ev) { 
     scope.$apply(function() { 
      if (scope.formErrors) { 
      scope.formErrors[element[0].name] = undefined; 

      var formName = element.parents('form').attr('name'); 
      scope[formName][element[0].name].$setValidity('server', true); 
      } 
     }) 
     }); 
    } 
    } 
}); 
+0

あなたは '$ scope.formErrors'を使ってエラーを保存しているので、そのフィールドを削除するだけです。 '$ scope.formErrors [' email '];' – Gavin

+0

を削除しました。ありがとうございます、私はすでにそれを試みましたが、メッセージを削除するだけで、フィールドとフォームは無効と見なされます。 –

答えて

0

あなたは単にあなたの提出ハンドラにフォーム名を渡すことができます:ディレクティブからフォームにアクセスするためのより良い方法があるかどうかわからない

<form name="form1" ng-submit="handleSubmit(form1)">..</form> 

その後、あなたはパラメータを経由して、フォームにアクセスすることができます送信ハンドラに渡されました:

$scope.handleSubmit = function(form) { 
    console.log(form.$name) 
} 

すなわち

form['input'].$setValidity('server', true); 

この情報がお役に立てば幸いですか!

+1

これは、スコープを介してフォーム名を渡す場合にもおそらく機能します。しかし、私が投稿した編集は大丈夫です、それは動作します。乾杯 –

関連する問題