AngularJSでフォームの送信を手動で開始するにはどうすればよいですか？

Question

私はネストしたいフォームを持っていますが、HTMLはネストされたフォームを受け入れることができないので不可能です。 AngularJSの最初のフォームで手動で送信を呼び出す方法（必要な場合など）がありますか？

ここでは、コードがどのように見えるかです：あなたが持つことができるhttp://jsfiddle.net/unWF3/

Answer 1

を場合に役立ちますところで、両方のフォームは1つのコントローラの下にある

<div ng-conroller="ContactController"> 

    <form ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="what code could trigger the first form's submit?"/> 

</div> 

ng-formディレクティブでネストされたフォーム。

<form name="accountForm"> 
    <div data-ng-form="detailsForm"> 
    <input required name="name" data-ng-model="name"> 
    </div> 
    <div data-ng-form="contactsForm"> 
    <input required name="address" data-ng-model="address"> 
    </div> 
    <button type="submit">Save</button> 
</form> 

submitが、それはまた、ネストされたNG-フォームを検証しますaccountFormのためにトリガされますその方法：それは次のようになります。

Answer 2

を：それはイベントをキャッチするディレクティブを作成してみてください

Answer 3

私は基本的に、あなたが作業のコード例&について検証メッセージを示すのに役立つ小さなユーティリティメソッドを$validateイベント

isFormValid = function($scope, ngForm) { 
    $scope.$broadcast('$validate'); 
    if(! ngForm.$invalid) { 
     return true; 
} 

を焼成することにより検証をトリガーすることができ、ここで同様の質問AngularJS - How to trigger submit in a nested form

に答えました上記のリンクの答えを見てください。

Answer 4

JavaScriptはsubmit （）関数を使用して直接フォームを送信できます。このようにして

document.getElementById("myform").submit() 

、我々はangularjs最初を使用してフォームを検証し、フォームが有効であるならば、提出方法を使用して、それを提出することができます。

Answer 5

これを行う簡単な方法があります。アプリにある各フォームの名前を付けてから、トリガーしたいフォームの角度オブジェクト全体を送信することができますあなたはそれで欲しい。例：あなたの関数で次に

<div ng-conroller="ContactController"> 

    <form name="myFirstForm" ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form name="mySecondForm" ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="saveHeaderAndDetail(myFirstForm)"/> 

</div> 

NGが提出

saveHeaderAndDetail (myFirstForm) { 
myFirstForm.$submitted = true 
... 
}