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

Question

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

Это может быть сделано с помощью одной формы, однако, если пользователь нажимает клавишу ввода при вводе электронной почты, он вызывает 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 here

Answer 1

Вы можете использовать один из следующих способов, чтобы указать, какой метод Javascript должен быть вызван, когда форма была отправлена:
* ngSubmit директива на элементе формы
* ngClick директива на первой кнопке или поле ввода типа подать (ввод [тип = представить])
- form docs

<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

Answer 2

I'v e аналогичное требование - многошаговая форма, управляемая мастером. Когда пользователь нажимает кнопку «Далее», я должен проверить текущую форму шага.

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

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

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

Рабочий код: Plunker link

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

Answer 3

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

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

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

Примечание: Это CoffeeScript