AngularJS - Come attivare l'invio in un modulo nidificato

Question

Sto costruendo un modulo che genera un invito quando inviato. L'invito ha diversi campi, uno dei quali è un input di un indirizzo e-mail con un pulsante "aggiungi", che quando viene fatto clic deve aggiungere quell'indirizzo a un elenco di indirizzi e-mail che dovrebbero ricevere l'invito.

Questo può essere fatto con un unico modulo, tuttavia se l'utente preme il tasto Invio durante la digitazione di una e-mail, quindi attiva submit sull'intero modulo. Mi piacerebbe che il risultato della chiave di invio - quando il campo di input della posta elettronica è focalizzato - abbia lo stesso effetto del pulsante "Aggiungi". Mi aspettavo che il modo corretto per risolvere questo sarebbe per nidificare il modulo di iscrizione e-mail entro il modulo di invito, qualcosa di simile:

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

Con il seguente javascript nel controller:

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

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

Il mio problema è che avere nidificato le forme (e in tal modo convertito <form>-<ng-form>, presentando uno dei due non funziona più.

Plunker here

Answer 1

È possibile utilizzare uno dei seguenti due modi per specificare quali javascript metodo deve essere chiamato quando viene inviato un modulo:
* direttiva ngSubmit sull'elemento modulo
* direttiva ngClick sul primo pulsante o campo di input di tipo submit (input [type = submit])
- 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 Requisito simile: modulo multi-step guidato dalla procedura guidata. Quando l'utente fa clic sul pulsante "Avanti", devo convalidare il modulo del passaggio corrente.

È possibile attivare la convalida attivando l'evento "$validate" sullo scope associato al modulo.

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

Quando mai voglio verificare se i valori del modulo sono corretti, che chiamerò isFormValid con l'istanza modulo ambito &.

codice di lavoro: Plunker link

E 'anche utile avere qualche logica aggiuntiva in isFormValid(incluso nel Plunker sopra) che rende i campi del modulo sotto forma & $dirty come saremmo visualizzare/nascondere messaggi di convalida basato sul loro stato $dirty.

Answer 3

quando il modulo viene inviato, è possibile trovare tutte le forme nidificate utilizzando qualche cosa come di seguito

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

Qui, forma è il controller forma esterna che è stata presentata. Puoi agganciare questo codice sul tuo onsubmit e trovare tutti i moduli annidati e fare tutto ciò che devi.

Nota: Questo è CoffeeScript