ng-includedフォームの有効性を親スコープから確認するにはどうすればよいですか？

Question

私は、アプリケーション内の複数のビューで共有されるサブフォームを持っています。 1つのビューでは、このサブフォームは単独で表示され、ユーザーを次のサブフォームに誘導する下部に戻る/続行ボタンが表示されます。別のビューでは、サブフォームは他のサブフォーム（基本的に1つの長いフォーム）と同じページに表示されます。

サブフォームのhtmlは両方のビューで100％同一であるため、部分的に分割し、ng-includeを使用してレンダリングしています。バック/継続ボタンを含むサブフォームのみを表示するビューでは、親のHTML内に戻る/続行ボタンを表示します。

視覚的にはすべて正常に動作し、フォームに入力されたすべてのデータにアクセスできます（user.email, user.password, user.etc...）。

問題は、ユーザーがフォームを正しく完了したかどうかに基づいて「続行」ボタンを有効/無効にしていることです。親のスコープがないため「サブフォームのみ」のバリエーションでは機能しませんフォームのステータスにアクセスできるようです。部分的にボタンをスティックすると機能しますが、この部分が使用されているすべてのインスタンスでボタンがそこに属していないため、これを実行したくありません。何かがボックスに入力されるまで、赤枠内のボタンを提出することを私の例では

JSFiddle Example

通知は無効になっている「フォーム無効な？」青い枠内のボタンは常に有効になっており、「フォームが無効ですか？」というメッセージが表示されます。値は空白です。

親スコープからmyForm.$invalidの値にアクセスするにはどうすればよいですか？

Answer 1

それは、サブフォームの場合は、あなただけのサブフォームからメインフォームにフォームタグを移動することができます。updated JSFiddle

あなたは可能性も巣フォームをngForm-directiveを使用して：

を

角度形式ではネストすることができます。これは、すべての子フォームが有効な場合でも、外部フォームが有効であることを意味します。しかし、ブラウザは要素の入れ子を許可しません。このため、angleはngFormエイリアスと同じ動作をしますが、フォームの入れ子を許可します。

結果はちょっと混乱します。私はむしろ$親を使用しないように、新しいスコープで「myForm'-ディレクティブを作成したい - のようなもの：

myApp.directive('myForm',function(){ 
    return{ 
     restrict:'E', 
     scope:{model:'='}, 
     templateUrl:'/form.html', 
     replace:true 
    } 
}); 

- このJSFiddle example

Answer 2

、使用時に作成した子スコープでNGが、含ま見ます親からフォーム関数を隠す。ディレクティブを使用することに加えて

、あなたも親にオブジェクトを追加することができますが、それはそうのようなプロパティを持つオブジェクトにフォームの名前を設定することが重要です：

<form name="myFormHolder.myForm"> 

とで親コントローラ

$scope.myFormHolder = {}; 

その後、次のように動作するはずです：

$scope.myFormHolder.myForm.$pristine 

こう番目eフォームが評価されると、myForm。$ validが親に設定されます。 Why form undefined inside ng-include when checking $pristine or $setDirty()?