Come attivare manualmente l'invio di un modulo in AngularJS?

Question

Ho un modulo che desideravo essere annidato, ma non è possibile poiché HTML non può accettare form annidati. C'è un modo per richiamare manualmente l'invio (attiva la convalida, ad es. Richiesta) sul primo modulo su AngularJS?

Ecco come il codice è simile:

<div ng-conroller="ContactController"> 

    <form ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="what code could trigger the first form's submit?"/> 

</div> 

Btw, entrambe le forme sono sotto un controller se questo aiuta

Answer 1

Prova a creare una direttiva che cattura un evento: http://jsfiddle.net/unWF3/

Answer 2

Si può avere moduli annidati con la direttiva ng-form. Sarà come:

<form name="accountForm"> 
    <div data-ng-form="detailsForm"> 
    <input required name="name" data-ng-model="name"> 
    </div> 
    <div data-ng-form="contactsForm"> 
    <input required name="address" data-ng-model="address"> 
    </div> 
    <button type="submit">Save</button> 
</form> 

In questo modo quando submit saranno attivati ​​per la accountForm che convaliderà NG-forme annidati anche.

Answer 3

Ho risposto a una domanda simile qui AngularJS - How to trigger submit in a nested form

In sostanza, è possibile attivare la convalida sparando $validate evento

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

Per lavorare esempio di codice & una piccola metodo di utilità che è disponibile a mostrare messaggi di convalida , vedi risposta nel link sopra.

Answer 4

Possiamo sempre inviare un modulo direttamente utilizzando la funzione invia () da javascript.

document.getElementById("myform").submit() 

In questo modo, siamo in grado di convalidare il formulario con angularjs prima e se il modulo è valido quindi inviare utilizzando il metodo di invio.

Answer 5

C'è un modo più semplice per farlo, puoi dare un nome per ogni modulo che hai nella tua app, quindi sarai in grado di inviare l'intero oggetto angolare del modulo che vuoi attivare o fare qualunque cosa tu vuoi con esso. Esempio:

<div ng-conroller="ContactController"> 

    <form name="myFirstForm" ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form name="mySecondForm" ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="saveHeaderAndDetail(myFirstForm)"/> 

</div> 

Poi nella funzione

saveHeaderAndDetail (myFirstForm) { 
myFirstForm.$submitted = true 
... 
}