Как вручную запускать форму submit в AngularJS?

У меня есть форма, которую я хотел бы вставить, но это невозможно, поскольку HTML не может принимать вложенную форму. Есть ли способ, с помощью которого я могу вручную вызвать submit (запускает проверку, например, требуется) в первой форме на 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 submit?"/>

</div>

Btw, обе формы находятся под одним контроллером, если это помогает

Ответ 1

Попробуйте создать директиву, которая ловит событие:

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>

Ответ 2

Я ответил на аналогичный вопрос здесь AngularJS - Как запустить submit во вложенной форме

В принципе, вы можете инициировать проверку путем запуска $validate event

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

Для примера рабочего кода и небольшого метода полезности, который полезен при показе сообщений проверки, см. ответ в приведенной выше ссылке.

Ответ 3

У вас могут быть вложенные формы с директивой 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-формы.

Ответ 4

Есть более простой способ сделать это. Вы можете указать имя для каждой формы, которую у вас есть в своем приложении, тогда вы сможете отправить весь объект angular формы, которую вы хотите вызвать или сделать что бы вы ни хотели с этим. Пример:

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

Затем в вашей функции

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

Ответ 5

Мы всегда можем отправить форму напрямую с помощью отправки () из javascript.

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

Таким образом, мы можем сначала подтвердить форму с помощью угловых символов, и если форма верна, то отправьте ее с помощью метода отправки.