AngularJS - Wie Submit in einem geschachtelten Formular ausgelöst wird

Question

Ich bin ein Formular erstellen, die eine Einladung generiert, wenn sie gesendet wird. Die Einladung hat mehrere Felder, von denen eines eine E-Mail-Adresse ist, die mit einem "Hinzufügen" -Button eingegeben wird. Wenn Sie darauf klicken, sollten Sie diese Adresse zu einer Liste von E-Mail-Adressen hinzufügen, die die Einladung erhalten sollen.

Dies kann mit einem einzigen Formular erfolgen. Wenn der Benutzer jedoch beim Eingeben einer E-Mail die Eingabetaste drückt, wird das ganze Formular mit submit ausgelöst. Ich möchte, dass das Enter-Key-Ergebnis - wenn das E-Mail-Eingabefeld fokussiert ist - denselben Effekt wie das Klicken auf die Schaltfläche "Hinzufügen" hat. Ich erwartete, dass der richtige Weg, dies zu nisten ein E-Mail-Anmeldeformular in der Einladung Form, so etwas wie das wäre zu lösen:

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

Mit dem folgende Javascript in der Steuerung:

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

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

Mein Problem ist, dass die Formen <form>-<ng-form> (und dabei, so umgewandelt verschachtelt haben Absenden entweder nicht mehr funktioniert.

Plunker here

Answer 1

Sie eine der folgenden zwei Möglichkeiten, können Sie festlegen, was sollten Sie Javascript-Methode aufgerufen werden, wenn ein Formular abgeschickt wird:
* ngSubmit Richtlinie über das Formularelement
* ngClick Richtlinie über die erste Schaltfläche oder Eingabefeld vom Typ einreichen (input [type = einreichen])
- 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 Eine ähnliche Anforderung - wizardgesteuertes Multi-Step-Formular. Wenn der Benutzer auf "Weiter" klickt, muss ich das aktuelle Schrittformular validieren.

Wir können die Validierung auslösen, indem wir das Ereignis '' auf dem Formular scope auslösen.

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

Wann immer ich, wenn die Form Wert korrekt überprüfen möge, ich isFormValid mit der Umfang & Formularinstanz anrufen würde.

Arbeitscode: Plunker link

Es ist auch nützlich, einige zusätzliche Logik zu haben, in isFormValid(im obigen Plunker enthalten), die die Formularfelder Form & macht $dirty wie wir würden Ein-/Ausblenden Prüfungsmeldungen basierend auf ihrem $dirty Staat.

Answer 3

Wenn das Formular abgeschickt haben, können Sie alle verschachtelten Formen mit etwas, was wie unter

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

Hier Form finden ist die äußere Form Controller, der vorgelegt wurde. Sie können diesen Code an Ihrem onsubmit hängen und alle verschachtelten Formulare finden und alles tun, was Sie tun müssen.

Hinweis: Dies ist Coffee