19

ネストしたいフォームがありますが、HTML はネストされたフォームを受け入れることができないため、ネストすることはできません。AngularJS の最初のフォームで送信を手動で呼び出す方法はありますか (たとえば、検証をトリガーします)。

コードは次のようになります。

<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>

ところで、それが役立つ場合、両方のフォームが1つのコントローラーの下にあります

4

5 に答える 5

9

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

var app = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.triggerSubmit = function() {
        $scope.$broadcast('myEvent');
        console.log('broad');
    };
    
    $scope.onSubmitted = function() {
        alert('submitted!');
    };
}


app.directive('submitOn', function() {
    return {
        link: function(scope, elm, attrs) {
            scope.$on(attrs.submitOn, function() {
                //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
                setTimeout(function() {
                    elm.trigger('submit');
                });
            });
        }
    };
});
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    <form submit-on="myEvent" ng-submit="onSubmitted()">
        Form...
    </form>
    <hr />
    <a class="btn" ng-click="triggerSubmit()">Submit</a>
</div>

元のソース: 

http://jsfiddle.net/unWF3/
于 2012-08-06T23:01:49.713 に答える
6

ここで同様の質問に答えましたAngularJS - ネストされたフォームで送信をトリガーする方法

$validate基本的に、イベントを発生させることで検証をトリガーできます

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

実際のコード例と検証メッセージの表示に役立つ小さなユーティリティ メソッドについては、上記のリンクの回答を参照してください。

于 2013-06-13T08:56:31.783 に答える
4

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すれば、いつトリガーされ、accountFormネストされた ng-forms も検証されます。

于 2013-03-15T18:46:01.077 に答える
1

javascript の submit () 関数を使用して、いつでも直接フォームを送信できます。

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

このようにして、最初に angularjs を使用してフォームを検証し、フォームが有効な場合は、submit メソッドを使用して送信できます。

于 2016-03-22T13:48:23.043 に答える