AngularJS - sposób wyzwalania przesyłania w formie zagnieżdżonej

Question

Buduję formularz, który generuje zaproszenie po przesłaniu. Zaproszenie ma kilka pól, z których jednym jest adres e-mail wprowadzany za pomocą przycisku "dodaj", który po kliknięciu powinien dodać ten adres do listy adresów e-mail, które powinny otrzymać zaproszenie.

Można to zrobić za pomocą pojedynczego formularza, jednak jeśli użytkownik wpisze klawisz Enter podczas pisania wiadomości e-mail, wywoła ona submit w całym formularzu. Chciałbym uzyskać wynik klawisza Enter - gdy pole wprowadzania adresu e-mail jest skupione - ma taki sam efekt, jak kliknięcie przycisku "Dodaj". Spodziewałem się, że właściwym sposobem rozwiązania tego byłoby gniazdo formą wejścia e-mail w postaci zaproszenia, coś takiego:

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

z następującymi javascript w kontrolerze:

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

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

mój problem jest to, że po zagnieżdżać formularze (iw ten sposób przekształcony z <form> do <ng-form>, składając albo nikt już nie działa.

Plunker here

Answer 1

Można użyć jednego z dwóch poniższych sposobów, aby określić, jaka metoda javascript powinny być nazywane, gdy formularz jest składany:
* dyrektywa ngSubmit na elemencie formularza
* dyrektywa ngClick na pierwszym przycisku lub pola wprowadzania typu przesłać (wejście [Typ = przedstawić])
- 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 Podobny wymóg - wieloetapowy formularz oparty na kreatorze. Kiedy użytkownik kliknie przycisk "Dalej", muszę sprawdzić aktualny formularz kroku.

Możemy wyzwolić sprawdzanie autentyczności, wyzwalając zdarzenie "$validate" na scope powiązane z formularzem.

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

Gdy kiedykolwiek Chcę sprawdzić, czy wartości formularza są poprawne, zadzwonię isFormValid z zakresem & przykład formularza.

kod robocza: Plunker link

Jest także przydatny mieć kilka dodatkowych logiki w isFormValid(zawarte w powyższej Plunker) który sprawia, że ​​forma & pól formularza $dirty jak będziemy wykazujące/ukrywanie komunikatów walidacji na podstawie na ich stanie $dirty.

Answer 3

Gdy formularz jest przesyłany, można znaleźć wszystkie zagnieżdżone formy korzystania z niektórych rzeczy jak poniżej

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

Tutaj forma jest zewnętrzny kontroler formularza, który został złożony. Możesz podpiąć ten kod na ur onsubmit i znaleźć wszystkie zagnieżdżone formularze i zrobić to, co musisz.

Uwaga: To jest coffeescript