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

Я создаю форму, которая генерирует приглашение при отправке. В приглашении есть несколько полей, один из которых представляет собой адрес электронной почты с кнопкой "добавить", который при нажатии должен добавить этот адрес в список адресов электронной почты, которые должны получить приглашение.

Это можно сделать с помощью одной формы, однако, если пользователь нажимает клавишу ввода во время ввода сообщения электронной почты, он вызывает submit на всей форме. Я хотел бы получить результат ввода ключа - когда поле ввода электронной почты сфокусировано - имеет тот же эффект, что и нажатие кнопки "добавить". Я ожидал, что правильным способом решить эту проблему будет вложение формы ввода электронной почты в форму приглашения, примерно так:

    <ng-form ng-submit="sendInvite()">
        <input type="text" placeholder="Title" ng-model="invitation.title"/>

        <ng-form ng-submit="addInvitee()">
            <input type="email" placeholder="Title" ng-model="inviteeEmail"/>
            <button class="btn" type="submit">add</button>
        </ng-form>

        <button class="btn" type="submit">Send</button>
    </ng-form>

С помощью следующего javascript в контроллере:

    $scope.addInvitee = function() {
        $scope.invitation.emails.push($scope.inviteeEmail);
        $scope.inviteeEmail = '';
    }

    $scope.sendInvite = function() {
        //code to send out the invitation
    }

Моя проблема заключается в том, что вложенные формы (и при этом преобразованные из <form> в <ng-form>, отправка одного из них больше не работает.

Plunker здесь

Ответ 1

Вы можете использовать один из двух способов указать, какой метод javascript следует вызывать при отправке формы:
* директива ngSubmit для элемента формы
* директива ngClick на первой кнопке или поле ввода типа submit (input [type = submit])
- форма документов

<ng-form>
   <input type="text" placeholder="Title" ng-model="invitation.title"><br>
   <ng-form>
     <input type="email" placeholder="Title" ng-model="inviteeEmail">
     <button class="btn" ng-click="addInvitee()">add</button><br>
   </ng-form>
   <ul class="unstyled">
     <li ng-repeat="invitee in invitation.invitees">
        <span>{{invitee.email}}</span>
     </li>
   </ul>
   <button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>

Plunker

Ответ 2

У меня есть аналогичное требование - многоступенчатая форма с мастером. Когда пользователь нажимает кнопку "Далее", я должен проверить текущую форму шага.

Мы можем инициировать проверку путем включения события $validate 'в scope, связанного с формой.

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

Когда я хочу проверить правильность значений формы, я вызову isFormValid с помощью экземпляра области и формы.

Рабочий код: Ссылка на Plunker

Также полезно иметь немного дополнительной логики в isFormValid (включенной в вышеупомянутый Plunker), который формирует поля формы и формы $dirty, поскольку мы будем показывать/скрывать сообщения проверки на основе их состояния $dirty.

Ответ 3

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

forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))

Здесь форма представляет собой внешний контроллер формы, который был отправлен. Вы можете подключить этот код к ur onsubmit и найти все вложенные формы и сделать все, что вам нужно.

Примечание. Это coffeescript