クライアント側でAngularを使用したサーバーサイドフォームの検証

Question

現在、私はクライアントサイドのものをAngularに変換しているプロジェクトを持っています。現在、サーバーでフォームの検証を行っています。クライアントとサーバーの両方で何年ものことを経て、私は自分の好みがサーバーへのAJAXリクエストによってそれを行うことであることを発見しました。したがって、設計上、クライアント側のフォーム検証はありません。

jsonをクライアントに返送するModelStateにある検証エラーでjQueryを使用してフォームを照らすことができます。

現在、角度です。私はこの実装を維持したいですが、私はそうするための技術と戦っているように感じています。 Angularはクライアント側の検証を主張するようです。

検証エラーが発生したAJAX応答を受信すると、Angular検証メカニズムに無効なものを通知して、サーバー側の検証をそのまま使用することはできませんか？

私は私が私の実装に基づく記事へのリンクが含まれている必要があり 編集 - あなたが見ることができるようにhttp://timgthomas.com/2013/09/simplify-client-side-validation-by-adding-a-server/を、それは角度を使用しません。あなたの現在のコードに変更することが喜んでどのくらいに応じて、それを行うための一つの方法ですAngularJsでそれをサーバー側の側面を取るために、それが動作します

おかげ

Answer 1

いいだろういくつかのことを前提としています。

あなたはこの

<form name="form" novalidate ng-submit="update(form)"> 
    <input type="text" ng-model="Input" name="Input"/> 
    <button type="submit">Save</button> 
</form> 

のような形を持っているそして、あなたの更新機能は、この

function update(form) { 
    testResource.save($scope.Input) 
     .$promise 
     .then(function (response) { 
      console.log("Success"); 
     }) 
     .catch(function (response) { 
      console.log("fail"); 
      for (var i = 0; i < response.data.length; i++) { 
       form[response.data[i].Name].$setValidity(response.data[i].Error, false); 
      } 
     }); 
} 

のようになります。失敗した応答のデータがこの

[{ Name: "Input", Error: "required" }]; 

よう

レッツ・構造化されるだろう

これは、サーバー上のすべての検証を実行して、それをang ularを処理する。

送信機能で角度のフォームをコントローラに送信しているときに、角度リソースの応答が不正になるとエラーが発生したフォームプロパティにエラーが追加されます。これは、あなたの入力の名前が、あなたが悪いレスポンスから渡した名前と同じでなければならないことを意味します。