jQueryのvalidation with angularJSを使用した剃刀ビューの使用

Question

私はMVCアプリケーションでAngularJSを使用しており、両方の世界の中で最高のものを使用しようとしています。私は本当にあなたのビューモデルであなたの検証ロジックを設定し、少しの努力であなたのかみそりのビューでjQueryの検証とクライアント側の検証を生成するMVCでできることが好きです。私は、などのルーティングとSPAの動作を取得するためにAngularJSを使用しますが、私はかみそりのビューを作成するとき、私は、あるページに注入するために使用している：そして、jQueryの検証はスクリプトファイルが上の参照であっても、動作しなくなった <div data-ng-view="data-ng-view"></div>

ビューが注入されるページ私のかみそりビューについては、以下を参照してください：すべての

@model BandViewModel 
<div data-ng-controller="App.BandCreateCtrl"> 
    <form name="startBandForm"> 
     @Html.ValidationSummary(true) 
     <br /> 
     @Html.LabelFor(m => m.Name) 
     @Html.TextBoxFor(m => m.Name, new { data_ng_model = "band.Name" }) 
     @Html.ValidationMessageFor(m => m.Name) 
     <br/> 
     <input data-ng-disabled="startBandForm.$invalid" type="submit" data-ng-click="createBand(band)" value="Create"/> 
    </form> 
</div> 

Answer 1

まず、IMOのテンプレートをレンダリングするためにかみそりを使用して最高の状態で、危険をはらんでいます。一般的には、ページやディレクティブのテンプレートに静的HTMLを使用し、AJAXとしてデータを取得してAPIに渡したいとします。 ASP.NET Web APIは、実際にはこれで実際にはうまくいきます。基礎となるモデルに検証がある場合、悪いWeb API呼び出しは例外をスローします。この例外は、$ httpまたは$リソースハンドラで捕捉してユーザーに表示できます。 AngularJSと標準的なHTTPフォームの投稿を混在させることは難しいでしょう。

あなたが望むものを実現するには、自分自身ではjQuery Validate pluginを使用しているjQuery Unobtrusive Validation libraryに相当するAngularJSを書く必要があると思います。自明ではない。私は個人的にドロップインを見ていません角度の検証はすぐに起こって、特にそれはマークアップとより多くのJSの設定オブジェクトとは関係があります。

the $viewContentLoaded eventを使用してビューの読み込みが完了したら、検証を再初期化する可能性があります。しかし、しないでください。

Answer 2

私は痛みがありますどこでも「HTMLはテンプレートにすぎません。おそらく、私はただのJavaScript

にすべてを委任する準備ができていないよ代わりにHTML属性を渡すための匿名オブジェクトを使用しての、辞書

@Html.TextBoxFor(m => m.Name, new Dictionary<string, object>(){{ "data_ng_model", "band.Name" }}) 

を使用してみていることを確認してください

Dictionary<string, object> 

です

そしてない

Dictionary<string, string> 

そうでない場合は、コンストラクタは、しかし

object HtmlAttribute 

ないとかなりのためにそれを混同します...しかし、それはほとんどの部分のために働きます。

最後に、 jQueryの後にAngularJS を含めると、セレクタにjQueryが使用されることに注意してください。

Answer 3

おそらく、あなたが思っているよりも痛みを軽減するために、角度を使って検証してください。

<validated-input name=username display="User Name" ng-model=model.username required</validated-input> 

チェックアウト私のサンプルhereとそのインスピレーションhere：カスタムディレクティブのカップルを使用して、簡単のような単純なマークアップとレイザーに非常に近いものを得ることができます。現時点では必要な番号だけを実装していますが、カスタマイズするのは簡単です。

Answer 4

ngvalライブラリを使用できます。これは、データアノテーションをanglejsバリデーションディレクティブとしてクライアント側に提供します。

Answer 5

この問題の解決策を探している人には、簡単に動作させる方法があります。

var currForm = $("#myForm"); 
currForm.removeData("validator"); 
currForm.removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse(currForm); 
currForm.validate(); 

このコードは、$ viewContentLoadedまたはコード内の他の場所に配置できます。

ここでは、MVCビューが角度コードのテンプレートとして使用されることを妨げるいくつかのビューを理解していますが、私の理由は、角度をもって物事をする自然な方法ではないので、あなたがこのような問題に遭遇する可能性があります。しかし、MVCビューをテンプレートとして使用する利点は、地獄への道ではありません。 ITは機能し、あなたにも利益をもたらすことができます。 MVCビューを使用するのが大変なプロジェクトで2つのユースケースがあります。

1. 私のプロジェクトは、実際に私は私がレンダリング時のデータアノテーションを追加または削除することができますMVCカスタムデータ注釈バリデータを使用し、このために、クライアントが特定のフィールドに必要な検証を回すことができる要件を持っています単一のクラスを使用してビューを作成する場合、同じ柔軟性を構築するには、より多くのコードを書く必要があります。 MVCビューは、DisplayForとEditorForヘルパーによってカスタムデータ注釈がトリガーされるので、ここではうまくいきます。
2. 私たちは国際化に多額の投資をしていますが、他のものではすばらしいですが、国際化はその強力なスイートではありませんatleast）。私はまだ.RESXがうまく動作し、長い間ここに来ているMVCの国際化サポートを感じています。これは、DisplayAttributeのデータ注釈機能を再度使用します。

TLDR：MVCビューをテンプレートとして使用すると、予期せぬ問題が発生する可能性がありますが、Microsoftが作成したデータ注釈パイプラインの機能を実際に使用している場合は、その価値があります。

将来的に誰かがAngular HTMLヘルパーライブラリを用意してくれたらうれしいですね。